html出现滚动条页面闪动,css解决滚动条出现造成页面晃动的问题

窗体默认是没有滚动条的，而HTML的内容是自上而下加载，就会发生一开始没有滚动条，后来突然出现滚动条，此时页面的可用宽度发生变化，水平方向的内容会发生晃动，尤其是水平居中显示的内容，出现滚动条后会重新计算。

解决方法：

一、简单的做法是

html {

overflow-y: scroll;

}

当页面注定要出现滚动条的话，可以用此方法，让滚动条从一开始就显示出来，即使内容一屏能展示也会出现滚动条，这里有点不优雅。

二、高级做法

html{

overflow-y: scroll;

}

:root {

overflow-x: auto;

overflow-y: hidden

}

:root body {

position: absolute;

}

body {

width: 100vw;

overflow: hidden;

}

这样整个页面的滚动条不会出现，局部盒子的滚动条也不受影响。棒棒棒！

最后：记录一下自定义滚动条的方法。

::-webkit-scrollbar; 滚动条整体部分

::-webkit-scrollbar-button; 滚动条两端的按钮

::-webkit-scrollbar-track; 外层轨道

::-webkit-scrollbar-track-piece; 内层轨道

::-webkit-scrollbar-thumb; 滚动滑块

::-webkit-scrollbar-corner; 边角

转载自原文：https://blog.csdn.net/haoyanyu_/article/details/82422544