在网页开发中，有些页面有滚动条，有些页面没有滚动条，当进行页面切换的时候，就有可能出现页面抖动问题。
那如何解决因滚动条而出现的页面抖动问题呢？
下面介绍了两种方法都可以解决页面抖动问题，选择其中一种就行。
方法一
设置body的宽度为100vw，再设置overflow-x为hidden
body {
width: 100vw;
}
html {
overflow-y: auto;
overflow-x: hidden;
}
width: 100vw;
}
html {
overflow-y: auto;
overflow-x: hidden;
}
方法二
把滚动条去掉
/*定义滚动条高宽及背景
高宽分别对应横竖滚动条的尺寸*/
::-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;
}
高宽分别对应横竖滚动条的尺寸*/
::-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;
}
这样页面切换的时候就不会再出现页面抖动了。
