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

【问题标题】：body.scrollTop vs documentElement.scrollTop vs window.pageYOffset vs window.scrollYbody.scrollTop vs documentElement.scrollTop vs window.pageYOffset vs window.scrollY
【发布时间】：2013-11-06 06:23:07
【问题描述】：

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

document.body.scrollTop,

document.documentElement.scrollTop,

window.pageYOffset,

window.scrollY

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

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

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

【问题讨论】：

标签： javascript cross-browser scrolltop

【解决方案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)

【讨论】：

@Amio 谢谢，我更新了指向特定提交的链接，因此它不会再次更改
更好用document.documentElement.scrollTop
window.pageYOffset 用于什么浏览器？
@Jessica 我认为是 Netscape (!)。

【解决方案2】：

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

【讨论】：

【解决方案3】：

致Prinzhorn的回答：

由于 body 和 documentElement 在 Chrome/Firefox 中是 undefined，因此更好地使用：

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

自己测试过。

【讨论】：

FF 中的 document.body.scrollTop 不起作用，并且 document.documentElement.scrollTop 的行为很奇怪：值有时是奇数。

【解决方案4】：

Chrome 使用documentElement.scrollTop，Firefox 使用body.scrollTop

【讨论】：

【解决方案5】：

console.log('body.scrollTop : ' + document.body.scrollTop);
console.log('documentElement.scrollTop : ' + document.documentElement.scrollTop);
console.log('window.pageYOffset : ' + window.pageYOffset);
console.log('window.scrollY : ' + window.scrollY);

输出 1：

0

184.8000030517578

184.8000030517578

184.8000030517578

输出 2：

0

185.8000037517577

185.8000037517577

185.8000037517577

等等……

在 Google Chrome 上测试 - 版本 85.0.4183.121（官方构建）（64 位）

document.body.scrollTop

这里总是给出 0，但其他三个完美。

【讨论】：