本文介绍: 在页面开发的时候,我们使用路由方法使页面进行跳转的时候,可能有些页面需要纵向的滚动条,可能有些页面不需要滚动条,由于在浏览器滚动条也是有默认样式占据着一点的范围,就会导致切换页面就会有抖动页面的效果体验十分差通过body宽度使用vw来设定,再设置html样式解决问题设置css切换页面就不会出现抖动了,或者我们可以采取很绝的方法,直接去修改滚动条的样式在该代码片段的第四行和第五行修改滚动条的宽度,这样浏览器就不会出现滚动条,页面也不会有抖动了,当然这种方法意味着斩草除根其他零碎的方法

解决页面切换出现滚动条而导致的抖动问题

前言

在页面开发的时候,我们使用路由等方法使页面进行跳转的时候,可能有些页面需要纵向的滚动条,可能有些页面不需要滚动条,由于在浏览器滚动条也是有默认样式占据着一点的范围,就会导致切换页面就会有抖动页面的效果体验十分差

解决问题

通过对body宽度使用vw来设定,再设置html样式解决问题

body {
  width: 100vw;
}

html {
  overflow-y: auto;
  overflow-x: hidden;
}

设置好css切换页面就不会出现抖动了,或者我们也可以采取很绝的方法,直接去修改滚动条的样式

/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background-color: #f5f5f5;
}
/*定义滚动条轨道
  内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}
/*定义滑块阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #555;
}

在该代码片段的第四行和第五行修改滚动条的宽度,这样浏览器就不会出现滚动条,页面也不会有抖动了,当然这种方法意味着斩草除根

其他零碎的方法就是给页面的右边加点预留,这点预留给到滚动条

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注