网页滚动条占用网页宽度导致网页抖动问题
作者：佚名 来源：爱好者 时间：2020-04-29
起因
最近使用bootstrap构建布局时，我发现不同页面container的x轴起始位置有些许不同，大概有几像素的变动，后来经过一个小时的排查发现不是代码书写问题，而是页面的滚动条也占用网页宽度，所以有滚动条的页面和没有滚动条的页面body的宽度是不一致的。
解决方法
本来没想去解决，我觉得只要网站内容填充起来就都有滚动条了，就没有去管！
直到刚刚准备写文章记录这个问题时突然来了个小灵感，一测试确实好用，只需要两条css语句，如下：
body {
margin-right: calc(-1 * (100vw - 100%));
overflow-x: hidden;
}
100vw是浏览器的宽度，100%时页面的宽度，所以100vw - 100%就是滚动条的宽度，没有滚动条的页面这样计算完是0，然后利用margin可以为负值，让右边距为负值的滚动条宽度，这样有滚动条的页面就与没有滚动条的页面宽度一致了。
最后隐藏下x轴的滚动条就完美了！兼容的话应该时IE9起步！
- 上一篇：Html多个引号重叠使用冲突解决办法
- 下一篇：百度地图设置显示公司地址
