起因
最近使用bootstrap
构建布局时,我发现不同页面container
的x
轴起始位置有些许不同,大概有几像素的变动,后来经过一个小时的排查发现不是代码书写问题,而是页面的滚动条也占用网页宽度,所以有滚动条的页面和没有滚动条的页面body
的宽度是不一致的。
解决方法
本来没想去解决,我觉得只要网站内容填充起来就都有滚动条了,就没有去管!
直到刚刚准备写文章记录这个问题时突然来了个小灵感,一测试确实好用,只需要两条css
语句,如下:
body {
margin-right: calc(-1 * (100vw - 100%));
overflow-x: hidden;
}
100vw
是浏览器的宽度,100%
时页面的宽度,所以100vw - 100%
就是滚动条的宽度,没有滚动条的页面这样计算完是0,然后利用margin
可以为负值,让右边距为负值的滚动条宽度,这样有滚动条的页面就与没有滚动条的页面宽度一致了。
最后隐藏下x
轴的滚动条就完美了!兼容的话应该时IE9
起步!
linkCard('.post-content','0');