内容溢出出现滚动条导致布局晃动的解决方案

最近在项目中遇到一个问题，就是当页面内容过多的时候，由于css限制了body层高度，同时设置了溢出滚动效果(overflow:auto)，当出现滚动条的时候，因为滚动条会占据页面可用宽度，所以会出现布局晃动的现象。我大概总结了以下这两种解决方案：

1、html元素使用固定的overflow:scroll

这种css方案可以解决滚动条出现的时候，页面布局不晃动，因为这个scroll属性代表浏览器会一直显示滚动条，只是内容没溢出的时候，没有滚动滑块。类似这样：

QQ浏览器截图20200808224330.png

如果感觉默认没溢出的时候这样显示比较丑，同时不考虑兼容性的情况下，可以试着去设置weikit浏览器的滚动条css类（该类链接参考），改变滚动条默认时候的显示颜色

2、将body绝对定位，并设置html元素overflow-y: auto

还有一种方案是把body变为绝对定位，代码如下：

  /* :root代表html元素 */
  :root {
    overflow-y: auto;
    overflow-x: hidden;
  }

  body {
    position: absolute;
    width:calc(100vw - 17px); /* 17px是我电脑当前分标率下滚动条的宽度，可自行设置宽度*/
    overflow: hidden;
  }