控制页面滚动

2020-04-02  本文已影响0人  般犀

查阅页面滚动相关资料时,看到大神的文章说:在移动端的窗体滚动元素是document.body,在PC端是document.documentElement,说是这么说,实测在iphone ios13上,使用document.body.scrollTop并无法让页面滚动,反而document.documentElement.scrollTop可以。

而为了统一控制窗体滚动的元素,又创造出了一个属性:document.scrollingElement。意思就是不管你是PC还是移动,安卓还是ios,只要用了这个属性,就可以控制页面的窗体滚动。

但是一个新推出的方案,往往只能拯救新的系统,看下这个属性的兼容性:


安卓4.4及以下无法支持,为了使安卓4.4的手机可以滚动,就只能使用document.body.scrollTop让页面滚动。

最后给出处理方案:

// 优先使用 scrollingElement
const scrollElement = document.scrollingElement || document.documentElement;
scrollElement.scrollTop = 100;

// 安卓4.4只能利用 body 的滚动,getAndroidVersion获取安卓主版本号
const androidVersion = getAndroidVersion();
if (androidVersion === 4) {
    document.body.scrollTop = 100;
}

这里不能使用document.scrollingElement || document.documentElement || document.body获取控制窗体元素,因为document.documentElement 在安卓4下也可以获取到,但是无法控制页面滚动,所以只能对安卓4单独判断。

上一篇下一篇

猜你喜欢

热点阅读