当试图找出一个网页从顶部滚动了多少时，应该使用以下哪一个：
document.body.scrollTop,
document.documentElement.scrollTop,
window.pageYOffset,
window.scrollY
在这两种不同的情况下，我会选择哪一种：
a) 如果我想要最大的兼容性（跨当前使用的主要浏览器）？
b) 如果我想要最符合标准/面向未来/严格模式兼容的代码（但不关心支持旧/非标准浏览器）？
问问题
32545 次
5 回答
35
我在 skrollr 源代码中使用了其中的三个
return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
a）到目前为止，它适用于所有浏览器（过去一年没有人抱怨）。
b）由于它将使用第一个定义的，我想它是未来的证明和稳定的。
如果你喜欢你也可以这样做
Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop)
于 2013-12-09T19:27:41.637 回答
4
鉴于 skrollr 不使用window.scrollY，这可能很明显，但作为对原始问题的进一步回答：window.pageYOffsetis an alias for window.scrollY. 请参阅Window.scrollY。
于 2015-03-24T12:25:37.673 回答
3
对Prinzhorn的回答：
由于bodyanddocumentElement位于undefinedChrome/Firefox 中，因此更好地使用：
return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
自己测试过。
于 2016-06-28T07:25:45.763 回答
1
Chrome 使用documentElement.scrollTop, firefox 使用body.scrollTop
于 2019-09-30T12:39:20.447 回答
0
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，但其他三个完美地工作。
于 2020-09-28T11:02:26.033 回答