获取网页窗体的滚动高度
移动端: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'
就是在移动端浏览器环境下???