页面出现滚动条导致页面抖动

本文首发：http://www.meibug.net/web/173.html

今天遇到一个问题，有滚动条的页面和没有滚动条的页面宽度不同，页面跳转时会有‘抖动/闪动’的问题。

原因：页面居中使用margin: 0 auto，页面出现滚动条时改变了页面的宽度

解决方案：
1.在居中定宽主体的父级加入一下css3代码

.wrap-outer {
    margin-left: calc(100vw - 100%);
}

或者使用

.wrap-outer {
    padding-left: calc(100vw - 100%);
}

calc是CSS3中的计算，IE10+浏览器支持，IE9浏览器基本支持（不能用在background-position上);

原理：
100vw相对于浏览器的window.innerWidth，是浏览器的内部宽度，其中滚动条也计算在内，而100%是可用宽度，不包含滚动条，所以表达式calc(100vw - 100%)就是计算出滚动条的宽度大小，所以当出现浏览器滚动条的时候，将页面往左边挤，margin-left的设置又将内容往右边挤了相同的宽度，这就导致了虽然页面没有变化，但是我们居中元素的margin值改变了

2.使用伪类

html {
  overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
  width: 100vw;
  overflow: hidden;
}

这种方案我没有使用，也没有测试，感兴趣的可以自己测试一下

附上：:root选择器的文档说明

https://developer.mozilla.org/zh-CN/docs/Web/CSS/:root

原文参考连接:https://www.zhangxinxu.com/wordpress/2015/01/css-page-scrollbar-toggle-center-no-jumping/