小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 « 张鑫旭-鑫空间

by zhangxinxu from
本文地址:/wordpress/?p=4552

一、程度居中规划与滚动条紧张地说的一千年难事

水流Web会期,压倒的多数翻书页间规划是横向集合的。,主要部分定个宽度,以后margin: 0 auto的节奏~

譬如,女性朋友DaaaBaO的首页:
淘宝首页的居中规划

不管到什么程度,这种规划有人家躲藏起来的危险物,支配用户体会。。将会都确信,指印刷中所用的一种字体浏览图书报刊者滚动条的Windows 默许值是决胜投票:天然产生的典型的,执意,以防巨大决不人家屏风。,无滚动条;超载,滚动条呈现。去,成绩来了:

  1. 交流流翻书页,如新浪网微博,摆布推进运动。后来,再稍微交流从头部装填。,在这点上,翻书页海拔是限制的。,无滚动条;以后,更多满足的显示,滚动条呈现,使忙碌行过宽度,margin: 0 auto学科元素自然界使歪斜——跳过扩大。
  2. JS相互作用,默许翻书页海拔决不人家屏风。,去,单击装填更多,很人家屏风满足的,滚动条呈现,翻书页的主要部分将向左跳过。。
  3. 体系近亲关系地多个翻书页,完成程度革新的革新的,去,有些翻书页有滚动条。,有些缺少。形成的算是执意,海上交通尼玛健康状况如何摆布紧张地说!

水流最佳化这一发觉的成绩,通常有两种receive 接收。:

  1. 无法断定海拔和面积,譬如,新浪网微博,应用:
    body { overflow-y: scroll; }

    新浪网微博处置滚动紧张地说成绩方法

  2. 海拔决定的,譬如,淘宝首页。应用CSS走到翻书页巨大的根本的,以后内幕吐出履历。。去,不然无滚动条,或许滚动条径直呈现。无力的有打击的。。
    淘宝网首页根本的示意

不管到什么程度,不管到什么程度,后一种战略只遵从的稍微特别的专用化翻书页。。你说出现就仿佛你确信的同样地。,满足的互相牵连翻书页,显然,它是无法能解决的。;第一种方法。overflow-y: scroll,当翻书页海拔小时,依然生活人家难看的的像灰的滚动条,竟,这曾经回到了IED的老境期。。指印刷中所用的一种字体浏览图书报刊者做的that的复数默许视觉最佳化岂挑剔损耗了,考虑很痛。。

痛心

伟大人物,有一百个吗?、两者兼得、三胜有侥幸的路吗?

阿弥陀佛,骚年,看一眼我在手里的为了灯。……

二、CSS3计算CAL和VW单元意识到SCR中不跳页

很简略,再同类信号。:

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

或许:

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

以后我们家可以祝贺放鞭炮。!!

率先.wrap-outer它指的是作主持人主要部分的亲子关系。,以防缺少,发觉人家(应用校长也可以走到近亲关系的算是),但适合宽度断绝关系十分重大的,不使显得吸引人);
以后calc是CSS3正中鹄的计算。,IE10 浏览图书报刊者供养,IE9浏览图书报刊者根本供养(不行过)background-position上);
到底100vw相对于浏览图书报刊者,浏览图书报刊者的内面的宽度,注重,滚动条宽度也计算在内!而100%是行过宽度,无滚动条宽度。
calc(100vw - 100%)是浏览图书报刊者滚动条的宽度(以防有的话),以防无滚动条则是0)!摆布都有人家滚动条宽度(或都是0)被使忙碌,话题满足的不变的可以在浏览图书报刊者的中心。,因而缺少拍子。!

你可以在这边打得很剧烈的(IE10):翻书页滚动条呈现的时辰缺少紧张地说demo

演示翻书页,在上加标题和下面的女郎都在中心。。在那里面,我姐姐做了滚动不跳的行业代理,在上加标题挑剔。,算是,你会发觉,倘若呈现滚动条将原因在上加标题译本跳过。,再,同类型的缺少像女神同样地摇动。:
翻书页滚动条呈现无力的紧张地说截图

和睦相处
供养:IE9 与安宁指印刷中所用的一种字体浏览图书报刊者。

窄筛宽列队行进
下面的CSS以及短时间弄脏。,当浏览图书报刊者宽度小时,漂白靠近的一边明白的姓越位的。,或许有些人傻。。此刻,最好做点答辩处置。:

@media screen and (最小宽度) 1150px) {
   .wrap-outer {
       margin-left: calc(100vw - 100%);
   }
}

2016年9月28日替换
完成屡次突出应验,向浏览图书报刊者滚动条呈现和消失音翻书页不滚动受胎每个人极限的的receive 接收,应验验证,夸大地工程应验是可行的的。,这是一份特别的证券:

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次,我真的很惧怕。,我依然非常的做。!哈哈!

以防你也有很棒的认为并应用前端技能, 你何妨把它拿出现和各种的分享一下。,将会有很多地不测的开腰槽和增长。。

这是一篇原文文字。,常常替换知点和开拓不公正,去,请保存这么的转载源。,手巧的究根儿,忍住给错误的劝告旧的和不公正的知,同时,也有较好的读数体会。。
本文地址:/wordpress/?p=4552

(本文煞尾)

发表评论

电子邮件地址不会被公开。 必填项已用*标注