body.scrollTop vs documentElement.scrollTop vs window.pageYOffset vs window.scrollY

Question

当试图找出从顶部滚动了多少网页时,应该使用哪一个:

document.body.scrollTop,

document.documentElement.scrollTop,

window.pageYOffset,

window.scrollY

在这两个不同的场景中我会选择哪一个:

a)如果我想要最大的兼容性(跨目前使用的主要浏览器)？

b)如果我想要符合最符合标准/未来证明/严格模式兼容的代码(但不关心支持旧/非标准浏览器)？

Answer 1

我在skrollr源代码中使用了其中的三个

return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

https://github.com/Prinzhorn/skrollr/blob/b98d40820b9864be275e81af382045d72cc5a08a/src/skrollr.js#L627

a)到目前为止,它适用于所有浏览器(过去一年没有人投诉).

b)因为它将使用定义的第一个,我想这是非常的未来证明和稳定.

如果你喜欢,你也可以这样做

Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop)

Answer 2

鉴于 skrollr 不使用window.scrollY，这可能是显而易见的，但作为对原始问题的进一步回答：window.pageYOffset是 的别名window.scrollY。请参阅Window.scrollY。