文档章节

CSS vw让overflow:auto页面滚动条出现时不跳动

放开那个女孩
 放开那个女孩
发布于 2017/10/27 19:21
字数 1261
阅读 22
收藏 0

一、水平居中布局与滚动条跳动的千年难题

当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽度,然后margin: 0 auto的节奏~

例如,妇女之友大淘宝的首页:
淘宝首页的居中布局

然而,这种布局有一个存在一个影响用户体验的隐患。应该都知道,现代浏览器滚动条默认是overflow:auto类型的,也就是如果尺寸不足一屏,没有滚动条;超出,出现滚动条。于是,问题来了:

  1. 信息流页面,如新浪微博,是从上往下push渲染的。开始只有头部一些信息加载,此时页面高度有限,没有滚动条;然后,更多内容显示,滚动条出现,占据可用宽度,margin: 0 auto主体元素自然会做偏移——跳动产生。
  2. JS交互,本来默认页面高度不足一屏,结果点击了个“加载更多”,内容超过一屏,滚动条出现,页面主体就会左侧跳动。
  3. 结构类似几个页面通过头部的水平导航刷新切换,结果有的页面有滚动条,有的没有。造成的结果就是,导航尼玛怎么跳来跳去!

当前优化这种体验问题,一般有两种解决方法:

  1. 高度尺寸不确定的,例如,新浪微博,使用:
    body { overflow-y: scroll; }

    新浪微博处理滚动跳动问题方法

  2. 高度确定的,例如淘宝网首页。使用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;
}

大家随意取走,不用谢!

三、结束语

本文参考自:Fix ‘jumping scrollbar’ issue using only CSS

说点八卦吧,本文原作者名叫Ayke van Laëthem, 才开始写博客,就是因为写了这篇文章,搞掉了他1G的带宽流量,文章至少访问了15,000次,着实被吓着了,还是蛮搞的!哈哈! 

如果你也有精彩创意且使用的前端tips, 不妨也拿出来共享下,会有很多意外的收获与成长的。

本文转载自:http://www.zhangxinxu.com/wordpress/2015/01/css-page-scrollbar-toggle-center-no-jumping/

放开那个女孩
粉丝 4
博文 112
码字总数 43124
作品 0
杭州
程序员
私信 提问
解决Bootstrap模态框切换时页面抖动 or页面滚动条

Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置body -- overflow:hidden;margin-right:15px;(设置15px是因为浏览器的滚动条占位...

Deacyn
2015/09/18
8.4K
7
css深入理解之overflow

第一回 overflow基本属性 overflow基本属性 visibel hidden scroll auto inherit overflow-x和overflow-y overflow-x和overflow-y设置一样的值,等同于overflow。如果不同,其中一个赋予vis...

仲柯
2017/03/21
0
0
CSS进阶(11)—— overflow属性详解,利用CSS实现锚点定位

本章延续上一章BFC的内容深入探索BFC的最佳结界——overflow在其本职工作上的表现。 1.overflow的裁剪界线——border-box overflow属性用于指定块容器元素的内容溢出时的表现方式——滚动,裁...

1
06/20
0
0
Bootstrap3-技巧之解决Bootstrap模态框切换时页面抖动 or页面滚动条

Bootstrap3-技巧之解决Bootstrap模态框切换时页面抖动 or页面滚动条 Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置body -- ove...

517270667
2017/07/12
0
0
overflow --百度百科

overflow CSS属性 overflow 为CSS中设置当对象的内容超过其指定高度及宽度时如何管理内容的属性。 基本特性 初始值: visible 适用于: block-level and replaced elements 继承性: 无 百分...

折冲樽俎
2011/05/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

HTTP协议无状态,到底要怎么理解?

一,故事 一天,你有个需求,你要去超市买一瓶酱油。 到了超市买了酱油,你告诉售货员,下次给我准备下面粉,我下次来拿。 第二次,你去超市拿面粉,售货员说他不记得你什么时候说要准备面粉...

一代码农码一代
32分钟前
1
0
elk 邮件预警

{ "trigger": { "schedule": { "cron": "0/15 1 * * * ?" } }, "input": { "search": { "request": { "search_type": "query_then_fetch", "indices": [ "heartbeat*" ], "rest_total_hits_a......

internetafei
44分钟前
1
0
从一道面试题谈linux下fork的运行机制

今天一位朋友去一个不错的外企面试linux开发职位,面试官出了一个如下的题目: 给出如下C程序,在linux下使用gcc编译: #include "stdio.h" #include "sys/types.h" #include "unistd.h" in......

linux服务器架构
47分钟前
1
0
AEDPoS合约实现之GetConsensusCommand

正如文章AElf共识合约标准中所述,GetConsensusCommand接口用于获取某个公钥下一次生产区块的时间等信息。 在AEDPoS的实现中,其输入仅为一个公钥(public key),该接口实现方法的调用时间另...

AELF开发者社区
55分钟前
0
0
kotlin中奖概率

fun main() { var wins = 0 var chance = 0.2 var playTime = 10// 1000万次 val n = 10000000 (1..n).forEach { if (play(chance, playTime)) win......

oschina4cyy
57分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部