程度居中规划与滚动条跳动的千年困难

2019年8月22日 154次阅读 来源: hover_lew

绝大多数的页面间规划都是程度居中规划，主体定个宽度，
然后margin: 0 auto的节拍~比方，妇女之友大淘宝的首页：

.warp{
    width:1190px;
    margin:0 auto;
    position:relative;
}

然则，这类规划有一个存在一个影响用户体验的隐患。应当都晓得，当代浏览器转动条默许是overflow:auto范例的，也就是假如尺寸不足一屏，没有转动条；超越，涌现转动条。因而，题目来了：

1，信息流页面，如新浪微博，是从上往下push衬着的。最先只需头部一些信息加载，此时页面高度有限，没有转动条；然后，更多内容显现，转动条涌现，占有可用宽度，margin: 0 auto主体元素天然会做偏移——跳动发生。

2，JS交互，原本默许页面高度不足一屏，结果点击了个“加载更多”，内容凌驾一屏，转动条涌现，页面主体就会左边跳动。

3，构造相似几个页面经由过程头部的程度导航革新切换，结果有的页面有转动条，有的没有。形成的结果就是，导航尼玛怎样跳来跳去！

当前优化这类体验题目，平常有两种解决要领：

  • 高度尺寸不肯定的，比方，新浪微博，运用：
body { overflow-y: scroll; }
  • 高度肯定的，比方淘宝网首页。运用CSS把页面尺寸规划骨架搭好，再在内里吐数据。因而，要么没有转动条，要么转动条直接涌现。不会涌现跳动。
  • 然则，然则，背面的战略只合适一些特别的定制性很强的页面。你说像知乎这模样，高度随内容而定的页面，显著就没法驾御；而第1种要领overflow-y: scroll，在页面高度较小的时刻，依旧会保存一个貌寝的灰色的转动栏，这实在又回到了IE当道的旧社会时期。当代浏览器做的那些默许视觉优化岂不是白费了，想一想就好痛心。

巨匠，岂非就没有一了百了、一举两得、福星高照的要领了吗？
阿弥陀佛，骚年，请看我手中的这盏灯……

CSS3盘算calc和vw单元奇妙完成转动条涌现页面不跳动
很简单，只需一行代码就搞定了：

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

或许：

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

然后就能够庆贺放鞭炮啦！《程度居中规划与滚动条跳动的千年困难》

起首，.wrap-outer指的是居中定宽主体的父级，假如没有，建立一个（运用主体也是能够完成相似结果，不过本着宽度星散准绳，不引荐）；

然后，calc是CSS3中的盘算，IE10+浏览器支撑，IE9浏览器基础支撑(不能用在background-position上)；

末了，100vw相对于浏览器的window.innerWidth，是浏览器的内部宽度，注重，转动条宽度也盘算在内！而100%是可用宽度，是不含转动条的宽度。

因而，calc(100vw – 100%)就是浏览器转动条的宽度大小（假如有，假如没有转动条则是0）！摆布都有一个转动条宽度（或都是0）被占用，主体内容就能够永久居中浏览器啦，从而没有任何跳动！

您能够狠狠地点击这里(IE10+)：页面涌现转动条的时刻没有跳动demo

demo页面中，题目和下面的妹子都是居中结果。个中，妹子做了本文所述的“转动无跳动”处置惩罚，而题目没有，结果，你会发明，转动条涌现与否会让题目笔墨跳动，然则，妹子却女神般纹丝不动：

《程度居中规划与滚动条跳动的千年困难》

兼容性
支撑：IE9+以及其他当代浏览器。

窄屏幕宽度下的处置惩罚
上面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;
}

岂非，你就不想点个赞再走。
吃了我的辣条，你还想跑，站住，别跑！
文章出处请点点点

    原文作者：hover_lew
    原文地址: https://segmentfault.com/a/1190000015681336
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞