菜单

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

2019年10月5日 - 银河官方网站
什么是虚拟视窗,深入理解overflow

什么是虚拟视窗(virtual viewport)

2015/04/09 · HTML5 ·
虚拟视窗

本文由 伯乐在线 –
柒柒
翻译,周进林
校稿。未经许可,禁止转载!
英文出处:updates.html5rocks.com。欢迎加入翻译组。

尽管谷歌新推出的移动浏览器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

获取滚动条宽度

        //获取浏览器滚动条宽度
        var scrollbarWidth=function () {  
            var w1, w2, outer,inner;
            outer = document.createElement('div');
            inner = document.createElement('div');
            outer.appendChild(inner);

            outer.style.display = 'block';
            outer.style.position = 'absolute';
            outer.style.width = '50px';
            outer.style.height = '50px';
            outer.style.overflow = 'hidden';

            inner.style.height = '100px';
            inner.style.width = 'auto';

            document.body.appendChild(outer);  

            w1 = inner.offsetWidth;  
            outer.style.overflow = 'scroll';  

            w2 = inner.offsetWidth;  

            if (w1 === w2) {  
              w2 = outer.clientWidth;  
            }  

            document.body.removeChild(outer);
            return w1 - w2;  
        }

overflow:auto的潜在布局隐患
1.滚动条会占用容器尺寸,原本和谐的布局,可能因为滚动条出现后发生问题(尽量使用自适应布局,或者预留滚动条的宽度)
2.水平居中跳动的问题(滚动条出现时,水平居中是内容会发生移动,这样页面切换时,会产生内容上的跳动感)
如何修复:

自定义滚动条-webkit内核

银河官方网站 7

image.png

jQuery自定义滚动条插件

项目页面:http://manos.malihu.gr/jquery-custom-content-scroller/
Github地址:https://github.com/malihu/malihu-custom-scrollbar-plugin

清除浮动

.clearfloat{zoom:1}
.clearfloat:after{display:block;clear:both;content:"";}

相关文章

发表评论

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

网站地图xml地图