使用document.scrollingElement控制窗体滚动高度
source link: https://www.zhangxinxu.com/wordpress/2019/02/document-scrollingelement/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8495
本文可全文转载,个人网站无需授权,只要保留原作者、出处以及文中链接即可,任何网站均可摘要聚合,商用请联系授权。
一、为何有document.scrollingElement?
如果只是为了获取当前网页窗体的滚动高度,直接使用window.pageYOffset
就可以了(IE9+),桌面端和移动端都支持。
但是window.pageYOffset
是一个只读属性,我们无法用来设置窗体的滚动高度,此时,就要找到对应的滚动元素,通过设置scrollTop
值来改变窗体的滚动位置。
然后,桌面端和移动端的窗体滚动元素是不一样的,如下测试代码:
document.documentElement.scrollTop; document.body.scrollTop;
大家有兴趣也可以扫下面二维码自己测试下:
或者直接访问这个页面:窗体滚动高度所在容器测试demo
结果在PC上是这样:
而在手机上则是:
- 桌面端浏览器
document.body.scrollTop
一直是0,说明桌面端滚动元素是document.documentElement
; - 移动端
document.documentElement.scrollTop
一直是0,说明移动端滚动元素是document.body
;
可以看到,在不同的平台上,滚动元素是不一样的,于是就有兼容性问题。
例如要实现一个返回顶部效果,我们目前的做法是下面两个语句并行:
document.documentElement.scrollTop = 0; document.body.scrollTop = 0;
就显得很啰嗦,正是由于这种现状,document.scrollingElement
这个属性才应运而生,直接动态识别滚动容器。
document.scrollingElement一统江湖
- 在桌面端
document.scrollingElement
就是document.documentElement
; - 在移动端
document.scrollingElement
就是document.body
。
可以自动识别不同平台上的滚动容器。
于是当我们希望页面滚动定位到具体位置的时候,如400像素,直接一行代码就可以搞定了:
document.scrollingElement.scrollTop = 400;
语义更好,代码更精简,老方法可以直接say goodbye了!
大家可以扫下面二维码自己测试下:
或者直接访问这个页面:document.scrollingElement测试demo
点击按钮可以看到无论PC还是Mobile访问都滚动到了400像素位置。
同时document.scrollingElement.tagName
输出的值分别是HTML
(桌面浏览器),和BODY
(移动端浏览器,如微信中)。
还是相当不错的,移动端放心使用,Android 5以上都支持。不过IE浏览器拖后腿了。
如果不放心一些老旧设备,可以使用Polyfill:https://github.com/mathiasbynens/document.scrollingElement
引入一个scrollingelement.js就可以了,很小的代码片段,可以兼容到一下版本:
<script src="scrollingelement.js"></script>
- Chrome
- Opera 11.64+
- Firefox 3.5+
- Internet Explorer 8+
- Safari 8+
二、结束语
日后再遇到控制窗体滚动高度的需求,不要犹豫,document.scrollingElement用起来。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK