页面之间的布局大部分都是水平居中布局，主体有宽度，然后margin的节奏：0auto~比如女性朋友圈的首页淘宝：。经{宽度：1190px;保证金：0自动；position:relative;}但是，这种布局存在影响用户体验的隐患。大家应该都知道现代浏览器的滚动条默认是overflow:auto类型的，也就是尺寸小于一屏就没有滚动条；如果超过，将出现滚动条。那么，问题来了：1、信息流页面，比如新浪微博，是从上到下push渲染的。一开始，只加载了header中的一些信息。这时候页面的高度是有限的，没有滚动条；然后，显示更多内容，并出现滚动条，占用可用宽度。margin:0automain元素自然会发生offset-jumping。2.JS交互。本来默认的页面高度是小于一屏的，但是当我点击“加载更多”的时候，内容超出了一屏，出现滚动条，页面主体会向左跳转。3、结构相似。几个页面通过头部横向导航进行刷新和切换。结果，有些页面有滚动条，有些则没有。结果，领航员怎么能跳来跳去！目前对于这个体验问题的优化一般有两种方案：一种是不确定高度和尺寸的，比如新浪微博，使用：body{overflow-y:scroll;}，有一定高度的，比如淘宝首页。使用CSS设置页面大小和布局骨架，然后在里面吐出数据。所以，要么没有滚动条，要么直接出现滚动条。不会有跳跃。但是，后一种策略只适用于一些特殊的、定制化程度高的页面。你说像知乎，高度依赖于内容的页面，显然是不可控的；而第一种方法overflow-y:scroll在页面高度较小的时候依然会保留一个难看的灰色滚动条，这其实是回到了IE盛行的旧社会。现代浏览器做的默认视觉优化不就白费了吗，想想都心疼。师父，难道就没有办法两全其美，过上幸福的生活吗？阿弥陀佛，骚年，请看我手上的这盏灯...CSS3巧妙的计算了calc和vw的单位，实现了出现滚动条，页面不跳转，非常简单，一行代码搞定：.wrap-outer{margin-left:calc(100vw-100%);}or:.wrap-outer{padding-left:calc(100vw-100%);}然后就可以放鞭炮庆祝啦！首先，.wrap-outer指的是居中固定宽度主体的父级。如果没有，就创建一个（使用body也可以达到类似的效果，但是基于宽度分离的原则，不推荐）；那么calc就是CSS3中的计算，IE10+浏览器支持，IE9浏览器基本支持（不能用在background-position上）；最后，100vw是浏览器相对于浏览器的window.innerWidth的内宽，注意滚动条的宽度也要计算在内！而100%是可用宽度，也就是没有滚动条的宽度。因此，calc(100vw-100%)就是浏览器滚动条的宽度（如果有，如果没有滚动条则为0）！有一个滚动条宽度（或两者都为0）被占用，主要内容始终可以在浏览器中居中，所以没有跳动！可以用力点这里（IE10+）：页面出现滚动条时没有跳转在demomo页面，标题和下面的妹子居中。其中，妹子做了本文描述的“滚动不跳转”处理，而标题没有。结果你会发现，不管滚动条出现与否，标题文字都会跳动，而妹子却像女神一样一动不动：兼容性支持：IE9+等现代浏览器。上面窄屏宽度下的CSS处理还是有点瑕疵的。当浏览器宽度比较小时，左边明显比右边白，可能看起来有点傻。此时，做一些响应式处理可能会更好：@mediascreenand(min-width:1150px){.wrap-outer{margin-left:calc(100vw-100%);}}2016年更新9月28日，经过一系列的项目实践，对于浏览器滚动条和不滚动消失页面有了更极致的解决方案。经过大型项目实践，验证了其可行性。这里特地分享一下：html{overflow-y:scroll;}:root{overflow-y:auto;overflow-x:hidden;}:rootbody{position:absolute;}body{width:100vw;overflow:hidden;}离开前不要点赞。你吃了我的辣条还想跑，住手，别跑！请点击文章来源
