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; 边角