绝大多数的页面间布局都是水平居中布局,主体定个宽度,
而后margin: 0 auto的节奏~例如,妇女之友大淘宝的首页:css
.warp{ width:1190px; margin:0 auto; position:relative; }
然而,这种布局有一个存在一个影响用户体验的隐患。应该都知道,现代浏览器滚动条默认是overflow:auto类型的,也就是若是尺寸不足一屏,没有滚动条;超出,出现滚动条。因而,问题来了:html
1,信息流页面,如新浪微博,是从上往下push渲染的。开始只有头部一些信息加载,此时页面高度有限,没有滚动条;而后,更多内容显示,滚动条出现,占据可用宽度,margin: 0 auto主体元素天然会作偏移——跳动产生。
2,JS交互,原本默认页面高度不足一屏,结果点击了个“加载更多”,内容超过一屏,滚动条出现,页面主体就会左侧跳动。
3,结构相似几个页面经过头部的水平导航刷新切换,结果有的页面有滚动条,有的没有。形成的结果就是,导航尼玛怎么跳来跳去!
当前优化这种体验问题,通常有两种解决方法:浏览器
body { overflow-y: scroll; }
大师,难道就没有一了百了、一箭双鵰、三生有幸的方法了吗?
阿弥陀佛,骚年,请看我手中的这盏灯……wordpress
CSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动
很简单,只要一行代码就搞定了:布局
.wrap-outer { margin-left: calc(100vw - 100%); }
或者:优化
.wrap-outer { padding-left: calc(100vw - 100%); }
而后就能够庆祝放鞭炮啦!spa
首先,.wrap-outer指的是居中定宽主体的父级,若是没有,建立一个(使用主体也是能够实现相似效果,不过本着宽度分离原则,不推荐);
而后,calc是CSS3中的计算,IE10+浏览器支持,IE9浏览器基本支持(不能用在background-position上);
最后,100vw相对于浏览器的window.innerWidth,是浏览器的内部宽度,注意,滚动条宽度也计算在内!而100%是可用宽度,是不含滚动条的宽度。
因而,calc(100vw - 100%)就是浏览器滚动条的宽度大小(若是有,若是没有滚动条则是0)!左右都有一个滚动条宽度(或都是0)被占用,主体内容就能够永远居中浏览器啦,从而没有任何跳动!
您能够狠狠地点击这里(IE10+):页面出现滚动条的时候没有跳动democode
demo页面中,标题和下面的妹子都是居中效果。其中,妹子作了本文所述的“滚动无跳动”处理,而标题没有,结果,你会发现,滚动条出现与否会让标题文字跳动,可是,妹子却女神般岿然不动:htm
兼容性
支持:IE9+以及其余现代浏览器。blog
窄屏幕宽度下的处理
上面CSS仍是有一点瑕疵的,浏览器宽度比较小的时候,左侧留的白明显与右边多,说不定会显得有点傻。此时,可能须要作点响应式处理会更好一点:
@media screen and (min-width: 1150px) { .wrap-outer { margin-left: calc(100vw - 100%); } }
更新于2016年9月28日
通过一些列项目实践,关于浏览器出现滚动条和消失页面不滚动有了更加终极的解决方案,通过大型项目实践已经验证至关具备可行性,这里特地分享下:
html { overflow-y: scroll; } :root { overflow-y: auto; overflow-x: hidden; } :root body { position: absolute; } body { width: 100vw; overflow: hidden; }
难道,你就不想点个赞再走。
吃了个人辣条,你还想跑,站住,别跑!
文章出处请点点点