html移动端获取页面的高度,Document.scrollingElement获取设置网页窗体滚动高度

获取网页窗体的滚动高度

移动端：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'

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