document.documentElement.scrollTop 返回值在 Chrome 中不同答案

【问题标题】：document.documentElement.scrollTop return value differs in Chromedocument.documentElement.scrollTop 返回值在 Chrome 中不同
【发布时间】：2013-12-29 03:47:27
【问题描述】：

我正在尝试根据“document.documentElement.scrollTop”值处理一些代码。它在 FF 和 IE 中返回“348”，但在 Chrome 中返回“0”。我需要做些什么来克服这个问题吗？

FF:

>>> document.documentElement.scrollTop
342

铬：

document.documentElement.scrollTop
0

【问题讨论】：

试试document.body.scrollTop
谢谢@Passerby ..除此之外还有其他解决方案吗？如果没有，我必须走这条路。
我不知道...一般你可以使用(document.documentElement.scrollTop || document.body.scrollTop)。
hmm.. 跨浏览器应该是：(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
建议很棒，除非尝试设置滚动位置...

标签： javascript jquery google-chrome

【解决方案1】：

在使用 Safari 版本 13 或更低版本时会发生这种情况。请将您的 Safari 浏览器更新至 14 或更高版本。

【讨论】：

【解决方案2】：

您可以使用以下代码来修复该错误！

let scrollHeight = document.body.scrollTop || document.documentElement.scrollTop;
console.log(`scrollHeight = ${scrollHeight}`);


/*

this comment just using for testing the scroll height!

but in this iframe, it doesn't work at all!

So, you can try it out using Chrome console!

*/

document.body.scrollTop;
// 对于 Chrome、Safari 和 Opera
document.documentElement.scrollTop;
// Firefox 和 IE 将溢出放置在层级，除非另有说明。
因此，我们为这两个浏览器使用 documentElement 属性

参考链接：
http://www.w3schools.com/jsref/prop_element_scrolltop.asp

https://drafts.csswg.org/cssom-view/#dom-element-scrolltop

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

【讨论】：

【解决方案3】：

您可以使用此功能 document.body.getBoundingClientRect() 它返回这个对象{x: 0, y: 0, width: 1903, height: 2691.5625, top: 0, …}; 在这个对象中你可以访问body top document.body.getBoundingClientRect().top

【讨论】：

【解决方案4】：

尽可能使用window.scrollY，它旨在跨浏览器保持一致。如果您需要支持 IE，那么我建议您仅使用 window.scrollY（如果可用）：

typeof window.scrollY === "undefined" ? window.pageYOffset : window.scrollY

window.scrollY 如果返回 0，将被评估为 false，因此，window.scrollY || window.pageYOffset 在技术上将在 window.scrollY 为 0 时检查 window.pageYOffset，如果 window.pageYOffset 不等于 0，这显然不是理想的。

另外请注意，如果您需要经常获取滚动值（每帧/每次滚动），通常情况下，您可能需要检查是否事先定义了 window.scrollY。我喜欢使用我编写的这个小辅助函数来完成此操作，同时使用 requestAnimationFrame - 它应该可以在 IE10 及更高版本中使用。

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)
})

【讨论】：

【解决方案5】：

获取滚动条的基于标准的方法是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)

【讨论】：

在 chrome 46 中返回 NaN
在 chrome 47 上对我来说可以正常工作...您的问题是否出现在任何特定站点或所有站点上？
@jazmit: 这部分条件document.body.scrollTop + (document.documentElement && document.documentElement.scrollTop || 0)有什么用
滚动可以在document.body 或document.documentElement 上定义。理论上，它可以在两者上定义，所以我们使用加法来组合卷轴。 documentElement 可能根本没有定义，因此 || 0 默认值。
如果它定义的意思？确定我们知道 document.body.scrollTop 和 document.documentElement.scrollTop 不会同时出现。所以我们需要这里的连接......我无法理解

【解决方案6】：

试试这个

window.pageYOffset || document.documentElement.scrollTop

【讨论】：

有趣的事实：这在 Windows Phone 的 WebView 中并不总是有效。深奥的边缘案例，但我刚刚撞到了。这些数字有时不同，强调有时，而 pageYOffset 似乎是错误的。
谢谢朋友，解决了我在使用 Safari 时遇到的问题