首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >document.documentElement.scrollTop返回值在Chrome中不同

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

Stack Overflow用户
提问于 2013-12-11 16:53:47
回答 5查看 39K关注 0票数 34

我正在尝试处理一些基于'document.documentElement.scrollTop‘值的代码。它在FF和IE中返回'348‘,但在Chrome中返回'0’。我需要做些什么来解决这个问题吗?

FF:

代码语言:javascript
复制
>>> document.documentElement.scrollTop
342

Chrome:

代码语言:javascript
复制
document.documentElement.scrollTop
0
EN

回答 5

Stack Overflow用户

发布于 2015-11-01 20:55:48

获取卷轴的基于标准的方法是window.scrollY。Chrome、Firefox、Opera、Safari和IE Edge或更高版本都支持此功能。如果你只支持这些浏览器,你应该使用这个属性。

IE >= 9支持类似的属性window.pageYOffset,出于兼容性的考虑,它在最近的浏览器中返回与window.scrollY相同的属性,尽管它可能会在某些时候被弃用。

使用document.documentElement.scrollTopdocument.body.scrollTop的问题是滚动不需要在这两者中的任何一个上定义。例如,Chrome和Safari在<body>元素上定义滚动,而Firefox在document.documentElement返回的<html>元素上定义滚动。这不是标准化的,可能会在浏览器的未来版本中发生变化。但是,如果scrollYpageYOffset不存在,这是获取滚动的唯一方法。

TL;DR:

window.scrollY || window.pageYOffset || document.body.scrollTop + (document.documentElement && document.documentElement.scrollTop || 0)

票数 48
EN

Stack Overflow用户

发布于 2014-02-18 23:33:20

尝尝这个

代码语言:javascript
复制
window.pageYOffset || document.documentElement.scrollTop
票数 19
EN

Stack Overflow用户

发布于 2017-09-06 02:11:16

在可能的情况下使用window.scrollY,它被设计成在不同浏览器之间保持一致。如果你需要支持IE,那么我建议你只使用可用的window.scrollY

代码语言:javascript
复制
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中工作。

代码语言:javascript
复制
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()
}

如下所示使用函数:

代码语言:javascript
复制
registerScrollHandler(function (x, y) {
    /* your code here :) */
    console.log("Scrolled the page", x, y)
})
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/20514596

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档