Document.scrollingElement获取设置网页窗体滚动高度

2019-04-112497次阅读javascript

获取网页窗体的滚动高度

移动端:

window.pageYOffset

桌面端:

window.pageYOffset || document.documentElement.scrollTop

window.pageYOffset是一个只读属性,移动端和桌面端都支持,但桌面端只支持IE9+;

document.documentElement.scrollTop是可读可写属性,浏览器兼容性非常好,但不支持Safari浏览器。

通过以上测试,获取浏览器网页窗体的滚动高度,两端兼容写法如下:

window.pageYOffset || document.documentElement.scrollTop

 

设置网页窗体的滚动高度

桌面端:

document.documentElement.scrollTop = 120;
document.body.scrollTop = 120;/*Safari*/

移动端:

document.body.scrollTop = 120;

可以看出桌面端和移动端的窗体滚动元素是不一样的,桌面端是document.documentElement,移动端是document.body,所以两端兼容写法如下:

document.documentElement.scrollTop = 120;
document.body.scrollTop = 120;/*Safari + 移动端*/

 

document.scrollingElement

在不同端下打印document.scrollingElement.tagName,输出的值分别是HTML(桌面浏览器),和BODY(移动端浏览器)。可以得出:

  • 在桌面端document.scrollingElement就是document.documentElement;

  • 在移动端document.scrollingElement就是document.body。

可以看出是自动识别不同平台上的滚动容器。

于是当我们希望页面滚动定位到具体位置的时候,如400像素,直接一行代码就可以搞定了:

document.scrollingElement.scrollTop = 400;

 

兼容性

可以看出移动端可以放心使用了。

最后tips:在不同端下打印document.scrollingElement.tagName,输出的值分别是HTML(桌面浏览器),和BODY(移动端浏览器)。那是不是可以这样理解:

document.scrollingElement.tagName == 'BODY'

就是在移动端浏览器环境下???

上一篇: vue-cli 3.x 修改dist路径及代理服务器配置  下一篇: DNS预获取dns-prefetch提升网页加载速度  

Document.scrollingElement获取设置网页窗体滚动高度相关文章