页面滚动条出现时不跳动

当前web届，绝大多数的页面间布局都是水平居中布局，主体定个宽度, 然后水平居中。然而，这种布局有一个存在一个影响用户体验的隐患。应该都知道，现代浏览器滚动条默认是overflow:auto类型的，也就是如果尺寸不足一屏，没有滚动条；超出，出现滚动条。

结果就会造成出现滚动条的时候，页面会向左侧跳动一下，这个体验上是会有一个微小的影响的。

当前的解决方案

高度不确定的

例如，新浪微博，使用overflow-y: scroll;。

缺点:在页面高度较小的时候，依然会保留一个丑陋的灰色的滚动栏，这其实又回到了IE当道的旧社会时代。现代浏览器做的那些默认视觉优化岂不是白费了，想想就好痛心。

高度确定的

使用CSS把页面尺寸布局骨架搭好，再在里面吐数据。于是，要么没有滚动条，要么滚动条直接出现。不会出现跳动。

缺点：只适合一些特殊的定制性很强的页面。你说像知乎这样子，高度随内容而定的页面，显然就无法驾驭.

更好的解决方案

使用CSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动。代码如下：

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

/* or */

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

说明:

• .wrap-outer指的是居中定宽主体的父级，如果没有，创建一个（使用主体也是可以实现类似效果，不过本着宽度分离原则，不推荐）；
• calc是CSS3中的计算，IE10+浏览器支持，IE9浏览器基本支持(不能用在background-position上)；
• 100vw相对于浏览器的window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！而100%是可用宽度，是不含滚动条的宽度。
• calc(100vw - 100%)就是浏览器滚动条的宽度大小（如果有，如果没有滚动条则是0）！左右都有一个滚动条宽度（或都是0）被占用，主体内容就可以永远居中浏览器啦，从而没有任何跳动！

兼容性:IE9+以及其他现代浏览器。

缺点:窄屏幕宽度下的处理。浏览器宽度比较小的时候，左侧留的白明显与右边多，说不定会显得有点傻。那么就在响应式的时候进行如上处理。

参考资料

• 小tip:纯CSS让overflow:auto页面滚动条出现时不跳动
• fix-jumping-scrollbar