深刻领悟overflow,什么是杜撰视窗

作者: 前端知识  发布:2019-06-24

何以是虚构视窗(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

本文由金沙澳门官网发布于前端知识,转载请注明出处:深刻领悟overflow,什么是杜撰视窗

关键词: 金沙澳门官网

上一篇:Web应用中的离线数据存款和储蓄
下一篇:没有了