前端工程师手册

页面滚动条出现时不跳动

当前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+以及其他现代浏览器。

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

参考资料