document.body.scrollTop VS document.documentElement.scrollTop

前几天对网站结构做了些优化和小的局部重构,之后发现前端页面行为异常,涉及到页面滚动和元素偏移的行为都挂掉了。调试发现,涉及到document.body.scrollTop的逻辑都失效了。

document.body or document.documentElement?

结论如下: chrome在浏览器标准模式下,并不支持documeng.body.scrollTop
有关于document.body.scrollTop的历史问题可以参考dom-element-scrolltop

IE和FireFox实现了标准的document.documentElement,具体spec在这里dom-document-scrollingelement
摘录一下:

而Webkit由于历史遗留问题,要保证原有feature的兼容性,仍然在quirks模式下沿用了document.body

所以,我们可以这样用:

let toTop = document.body.scrollTop || document.documentElement.scrollTop;
toTop = 666;

scrollingElement

由于Webkit下混乱的定义,所以引入了一个更加elegant的属性:scrollingElement

document.scrollingElement会返回当前到底是该用document.body还是document.documentElement

Spec定义如下:

所以,跨浏览器使用时,也可以这样来定义:

var scrollingElement = document.scrollingElement || document.documentElement;
scrollingElement.scrollTop = 123;

pollfill

当然,也已经有pollfill可以在所有浏览器上实现scrollingElement ——document.scrollingElement

References

document.body.scrollTop VS document.documentElement.scrollTop
Share this