Question

我正在尝试根据“document.documentElement.scrollTop”值处理一些代码。它会在FF和IE中返回“348”但在Chrome中会返回“0”。我是否需要做任何事情来克服这个问题？

FF：

>>> document.documentElement.scrollTop
342

铬：

document.documentElement.scrollTop
0

Answer 1

获取滚动的基于标准的方式是window.scrollY。 Chrome，Firefox，Opera，Safari和IE Edge或更高版本均支持此功能。如果您只支持这些浏览器，则应使用此属性。

IE＆gt; = 9支持类似的属性com.myproject，为了兼容性，它在最近的浏览器中返回与module1相同的内容，尽管它可能在某些时候被弃用。

使用window.pageYOffset或window.scrollY的问题是不需要在其中任何一个上定义滚动。 Chrome和Safari在document.documentElement.scrollTop元素上定义其滚动，而Firefox则在document.body.scrollTop返回的<body>元素上定义它。这不是标准化的，并且可能在未来版本的浏览器中发生变化。但是，如果<html>或document.documentElement不存在，则这是获取滚动的唯一方法。

TL; DR：

scrollY

Answer 2

试试这个

window.pageYOffset || document.documentElement.scrollTop

Answer 3

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

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 deon'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

Answer 4

尽可能使用window.scrollY，它设计为跨浏览器保持一致。如果您需要支持IE，那么我建议以下内容仅在window.scrollY可用的情况下使用{<1}}：

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

如果

window.scrollY返回0，则会将其评估为false，因此只要window.scrollY || window.pageYOffset为0，window.pageYOffset在技术上会检查window.scrollY，这显然不是理想的如果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)
})

Answer 5

您可以使用此功能 document.body.getBoundingClientRect() 并返回该对象{x: 0, y: 0, width: 1903, height: 2691.5625, top: 0, …};，在该对象中，您可以访问正文顶部document.body.getBoundingClientRect().top

document.documentElement.scrollTop返回值在Chrome中有所不同

5 个答案: