最近在项目中遇到一个问题，就是当页面内容过多的时候，由于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;
}
网友评论