我正在尝试处理一些基于'document.documentElement.scrollTop
‘值的代码。它在FF和IE中返回'348
‘,但在Chrome中返回'0
’。我需要做些什么来解决这个问题吗?
FF:
>>> document.documentElement.scrollTop
342
Chrome:
document.documentElement.scrollTop
0
发布于 2015-11-01 20:55:48
获取卷轴的基于标准的方法是window.scrollY
。Chrome、Firefox、Opera、Safari和IE Edge或更高版本都支持此功能。如果你只支持这些浏览器,你应该使用这个属性。
IE >= 9支持类似的属性window.pageYOffset
,出于兼容性的考虑,它在最近的浏览器中返回与window.scrollY
相同的属性,尽管它可能会在某些时候被弃用。
使用document.documentElement.scrollTop
或document.body.scrollTop
的问题是滚动不需要在这两者中的任何一个上定义。例如,Chrome和Safari在<body>
元素上定义滚动,而Firefox在document.documentElement
返回的<html>
元素上定义滚动。这不是标准化的,可能会在浏览器的未来版本中发生变化。但是,如果scrollY
或pageYOffset
不存在,这是获取滚动的唯一方法。
TL;DR:
window.scrollY || window.pageYOffset || document.body.scrollTop + (document.documentElement && document.documentElement.scrollTop || 0)
发布于 2014-02-18 23:33:20
尝尝这个
window.pageYOffset || document.documentElement.scrollTop
发布于 2017-09-06 02:11:16
在可能的情况下使用window.scrollY,它被设计成在不同浏览器之间保持一致。如果你需要支持IE,那么我建议你只使用可用的window.scrollY
:
typeof window.scrollY === "undefined" ? window.pageYOffset : window.scrollY
如果window.scrollY
返回0,它将被计算为false,所以无论何时window.scrollY
为0,执行window.scrollY || window.pageYOffset
都会从技术上检查window.pageYOffset
,如果window.pageYOffset
也不等于0,这显然不是理想的。
还要注意,如果您需要频繁地获取滚动值(每一帧/每一次滚动),您可能需要检查是否预先定义了window.scrollY
。我喜欢使用我写的这个小帮手函数来做这件事,同时使用requestAnimationFrame
-它应该可以在IE10和up中工作。
function registerScrollHandler (callback) {
"use strict"
var useLegacyScroll = typeof window.scrollY === "undefined",
lastX = useLegacyScroll ? window.pageXOffset : window.scrollX,
lastY = useLegacyScroll ? window.pageYOffset : window.scrollY
function scrollHandler () {
// get the values using legacy scroll if we need to
var thisX = useLegacyScroll ? window.pageXOffset : window.scrollX,
thisY = useLegacyScroll ? window.pageYOffset : window.scrollY
// if either the X or Y scroll position changed
if (thisX !== lastX || thisY !== lastY) {
callback(thisX, thisY)
// save the new position
lastX = thisX
lastY = thisY
}
// check again on the next frame
window.requestAnimationFrame(scrollHandler)
}
scrollHandler()
}
如下所示使用函数:
registerScrollHandler(function (x, y) {
/* your code here :) */
console.log("Scrolled the page", x, y)
})
https://stackoverflow.com/questions/20514596
复制相似问题