&nbs p;
一、水平居中布局与滚动条跳动的千年难题
当前web届，绝大多数的页面间布局都是水平居中布局，主体定个宽度，然后 margin: 0 auto 的节奏~
例如，妇女之友大淘宝的首页：
然而，这种布局有一个存在一个影响用户体验的隐患。应该都知道，现代浏览器滚动条默认是 overflow:auto 类型的，也就是如果尺寸不足一屏，没有滚动条；超出，出现滚动条。于是，问题来了：
信息流页面，如新浪微博，是从上往下push渲染的。开始只有头部一些信息加载，此时页面高度有限，没有滚动条；然后，更多内容显示，滚动条出现，占据可用宽度， margin: 0 auto 主体元素自然会做偏移——跳动产生。 JS交互，本来默认页面高度不足一屏，结果点击了个“加载更多”，内容超过一屏，滚动条出现，页面主体就会左侧跳动。 结构类似几个页面通过头部的水平导航刷新切换，结果有的页面有滚动条，有的没有。造成的结果就是，导航尼玛怎么跳来跳去！当前优化这种体验问题，一般有两种解决方法：
高度尺寸不确定的，例如，新浪微博，使用：
body { overflow-y: scroll; } 高度确定的，例如淘宝网首页。使用 CSS 把页面 尺寸 布局骨架搭好，再在里面吐数据。于是，要么没有滚动条，要么滚动条直接出现。不会出现跳动。
然而，然而，后面的策略只适合一些特殊的定制性很强的页面。你说像 知乎 这样子，高度随内容而定的页面，显然就无法驾驭；而第1种方法 overflow-y: scroll ，在页面高度较小的时候，依然会保留一个丑陋的灰色的滚动栏，这其实又回到了IE当道的旧社会时代。现代浏览器做的那些默认视觉优化岂不是白费了，想想就好痛心。
大师，难道就没有一了百了、两全其美、三生有幸的方法了吗？
阿弥陀佛，骚年，请看我手中的这盏灯……
二、CSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动
很 简单 ，只要一行代码就 搞定 了：
.wrap-outer { m arg in-left: calc(100vw - 100%); } 或者 ：
.wrap-outer { padding-left: calc(100vw - 100%); } 然后就可以庆祝放鞭炮啦！！
首先 ， .wrap-outer 指的是居中定 宽 主体 的父级，如果没有，创建一个（使用主体也是可以实现类似效果， 不过 本着宽度分离原则，不推荐）；
然后 ， calc 是CSS3中的计算，IE10+浏览器支持，IE9浏览器基本支持(不能用在 background-pos IT ion 上)；
最后 ， 100vw 相对于浏览器的 window.innerWidth ，是浏览器的内部宽度，注意， 滚动条宽度也计算在内 ！而 100% 是可用宽度，是不含滚动条的宽度。
于是 ， calc(100vw - 100%) 就是浏览器滚动条的宽度大小（如果有，如果没有滚动条则是 0 ）！左右都有一个滚动条宽度（或都是 0 ）被占用，主体内容就可以 永远 居中浏览器啦，从而没有任何跳动！
您可以狠狠地点击这里(IE10+)：页面出现滚动条的时候没有跳动demo
demo页面中，标题和下面的妹子都是居中效果。其中，妹子做了本文所述的“滚动无跳动”处理，而标题没有，结果，你会发现，滚动条出现与否会让标题文字跳动，但是，妹子却女神般岿然不动：
兼容性
支持：IE9+以及其他现代浏览器。
窄屏幕宽度下的处理
上面CSS还是有 一点 瑕疵的，浏览器宽度比较小的时候，左侧留的白明显与 右边 多，说不定会显得有点傻。此时，可能需要做点响应式处理会更好一点：
@media screen and (min-width: 1150px) { .wrap-outer { mar gin -left: calc(100vw - 100%); } } 更新于2016年9月28日
经过一些列项目实践，关于浏览器出现滚动条和 消失 页面不滚动有了更加终极的解决 方案 ，经过大型项目实践已经验证相当具有可行性，这里特意分享下：
ht ML { overflow-y: scroll; } :root { overflow-y: auto; overflow-x: hidden; } :root body { position: absolute; } body { width: 100vw; overflow: hidden; } 大家随意取走， 不用 谢！
三、结束语
本文参考自：Fix & # 8216;jumping scrollbar’ issue using only CSS
说点八卦吧，本文原作者名叫Ayke van Laëthem, 才 开始 写博客，就是因为写了这篇 文章 ，搞掉了他1G的 带宽 流量，文章至少访问了15,000次，着实被吓着了，还是蛮搞的！哈哈！
如果你也有精彩创意且使用的前端tips, 不妨也拿出来共享下，会有很多意外的收获与成长的。
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 全部内容，希望文章能够帮你解决 html5教程-小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-小tip:CSS vw让overflow:auto页面滚动条出现时不跳动的详细内容...