http://www.web008.net

什么是虚拟视窗,深入理解overflow

什么样是编造视窗(virtual viewport)

2015/04/09 · HTML5 · 编造视窗

本文由 伯乐在线 - 柒柒 翻译,周进林 校稿。未经许可,制止转发!
丹麦语出处:updates.html5rocks.com。招待参预翻译组。

固然Google新生产的移动浏览器Chrome M40在视窗上做的改动特别微小,但那对客户来讲却大有例外。

在起步移动浏览器时,不加视窗元标签的气象下,浏览器的网页大小默认为显示屏实际尺寸的980px左右,并在这里基础上开展渲染。而丰盛视窗元标签的话,开荒职员能够自定义网页宽度,常常设置为“设备宽度”,正是让页面大小自适应于设备的显示屏宽度。详见learn more on Web Fundamentals。

Rick Byers像这种类型陈述虚构视窗:虚构视窗正是将“视窗”概念分割成两有的,三个是“布局视窗(layout viewpor)”(在这里间,全数的剧情都处在一定的地点上),另一个是“虚构视窗(visual viewport)”(顾客实际看到的一些)。

1.重新恢复设置现象

当overflow-x 与 overflow-y值相同一时间 ,等同于overflow
当overflow-x 与 overflow-y值不均等时,且个中多个值为visible,另二个被授予hidden,auto,scroll时
那这么些visvible会被重新载入参数为auto;

一流简单的例证

Vediojs.com那一个网址正是个很好的事例,导航栏固定在顶端,况且在其左右两边都有连带链接。

下边的两排图片相比较呈现了,对页面进行放大和左右平移时,在二种版本的运动浏览器上分别会发生什么。

下边一排手提式有线电话机用的是Chrome M39,这一个本子未有虚构视窗功效,而上边包车型地铁多少个分界面来自全数设想视窗的Chrome M40。

图片 1

图片 2

在Chrome M39中,你放大分界面后还是能来看导航栏,不过往右挪就看不到导航栏左边的链接,只好看到网址的logo。

在这里点上Chrome M40(具备“虚构视窗”)就不雷同了,你能够看见“设想视窗”在“布局视窗”中滚动全部内容,这样就能够在左右滑行时看到导航栏上左侧的链接。

IE浏览器已经具有此项功效,这么些改良让大家的浏览器在听从上和她们的更是设身处地。

2.overflow:visible妙用

图片 3

image.png

html { overflow: hidden; }

那给开拓职员带来的最珍视变化是:在M39中,将overflow属性值设置为hidden后页面还是能够滚动,不过在M40中,那样做不再灵光。

滚动条现身法则

1.overflow:auto/overflow:scroll
多少成分天生自带滚动条:<html> <textarea>
2.内容尺寸当先容器限定

越来越多有用新闻

你想询问的愈来愈多?

那正是说,你能够看见下边包车型大巴幻灯片(幻灯片须要梯子才具查看)或然点击Rick’s Google+ Post,他在这里上面可比笔者武术深,你能真正精通到你想知道的。

1 赞 1 收藏 评论

body/html与滚动条

任凭什么样浏览器,暗中同意滚动条均来源于<html> 并不是<body>标签

图片 4

image.png

IE7-浏览器暗许: html { overflow-y: scroll }
IE8+浏览器暗中认可: html { overflow:auto }

所以,假若想要去掉页面暗中同意滚动条,只要求:

html { overflow: hidden; }

而没要求吧<body>也拉下水

html , body { overflow: hidden }

至于小编:柒柒

图片 5

翻译是一门高等的语言艺术,须要长时间辛苦地球科学习和试行才具真正能够通晓。网易:@猫屎咖啡在法国巴黎 个人主页 · 笔者的散文 · 21 ·   

图片 6

如何收获滚动中度

Chrome浏览器是: document.body.scrollTop
任何浏览器是: document.documentElement.scrollTop
现阶段互相不会同期设有,因而,坊间流传那类写法:

var st = document.body.scrollTop+document.documentElement.scrollTop;
建议采取
var st = document.body.scrollTop || document.documentElement.scrollTop

郑重声明:本文版权归美高梅163888所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。