html5:手机浏览器下的滚动条和overflow属性

最近做移动网站,遇到了滚动条问题。相对于传统的pc网站,手机网站的滚动条在外观和作用上有很大的不同,这让我一度感觉很错乱,甚至以为overflow这个css属性在移动端失效了。仔细研究和测试后,发现其实不然。特总结如下:

与pc站滚动条的不同

首先是外观和呈现上的不同。pc站点中的滚动条,你拖与不拖,它就在那里,不生不灭;移动站点中,滚动条就像在水伊人,“若隐若现”:只有你滑动视区时,它才会淡淡地来,手指一离开屏幕,它就会淡淡地去。当然也有例外,比如安卓版QQ浏览器,让我吐血,这个后面再说。

其次是使用情景和功能上的不同。pc站点中,视区较大,一个网页可能与多个相对独立的功能区域,每个区域都有可能出现滚动条。移动站点中,由于手机屏幕尺寸有限,通常只有一个“全局”滚动条。可以想象,假如一个小小的手机屏,被划分成若干块,滚动条很七竖八,那产品经理一定得卷铺盖了。

那么,这是否意味着前端攻城狮在处理手机滚动条时,所使用的css原理变了呢?不然。

手机网页中的overflow:auto?

不要被表面现象所迷惑,overflow这个css属性并没有在手机端变出什么新花样。只要你愿意,你打可以像pc端那样肆无忌惮地使用这个属性,让随意一个块级元素(div、ul等标签)出现滚动条。记住,不管是pc端还是是移动端,块级元素出现滚动条的充分必要条件是:固定的高度(宽度),并且overflow属性的值为auto或者scroll。如果你尝试了,并且失败了,去检查一下你的width或者height。

一个经常犯错误的情景是,设置了紧挨body的某个div的高度为100%,但就是死都不出滚动条。如果你还在为这个问题纠结,你还是别折腾移动站了,先去恶补一下基础知识,去pc端练练手再说。

手机中的水平滚动条

是的,没错,手机网页中完全能够弄出水平滚动条来。但是谁会这样整呢?

对全屏显示功能的影响

手机浏览器大都有一个有趣而实用的功能,当滚动条滑动到网页最顶部时,如果继续向上滑动手指,那么浏览会就会隐藏地址栏,全屏显示。这样,整个网页看起来回来native app的感觉。

但是使用滚动条不当,会导致这一功能失效。通常情况下,网页默认的滚动条是属于body或html标签的,姑且称之为“根滚动条”。如果你手动隐藏这个根滚动条,而是使用网页的其他标签的滚动条,那么,浏览器的全屏显示功能会失效。我测试过的会受影响的浏览器有:安卓下,自带浏览器、chrome、qq浏览器、360极速浏览器、uc浏览器、firefox、opera;ipad下,safari、chrome。由于本人没有iphone,故iphone下情况未知,不过在ipad中安装的iphone版qq、360手机浏览器未受影响,比较奇怪,吼吼。

qq浏览器下的异常

国产浏览器总是不让人省心,前端攻城狮的生命有一半是耗在这上面的。手机国产浏览器中,qq浏览器比较值得关注,因为微信和手机qq拥有惊人的市场份额,而量两款社交应用使用的都是qq浏览器的内核。

但是,手机qq浏览器的滚动条有一些让人气的吐血的问题。

第一,如果不使用根滚动条,而让其他块级标签滚动,那么滚动条就不会再优雅地“若隐若现”,而是和pc端一样,一直都呈现(见下图)。这对于拥有强迫症的我来说,实在是抓狂万分。

特定情况下,手机qq浏览器的滚动条无法优雅地“若隐若现”,而是一直存在

特定情况下,手机qq浏览器的滚动条无法优雅地“若隐若现”,而是一直存在

第二,如果把块级标签设置为position:fixed,那么手机qq浏览器下滚动条就会出现在该标签左边,而不是右边。经测试,设置为absolute或者relative无此问题。实在太无语了。见下图。

手机qq浏览器下滚动条就会出现在该标签左边,而不是右边

手机qq浏览器下滚动条就会出现在该标签左边,而不是右边

第三,手机qq浏览器下不使用根滚动条,而是用其他标签的滚动条,会导致滚动不平滑,一卡一卡的。

不过,吐槽归吐槽,日子还是要过的,毕竟离开微信和qq不能活。前端们,且行且珍惜吧。。。。