为什么window onscroll 事件不起作用？

Question

我想执行 window onscroll 事件，但我不知道为什么它不能在所有浏览器（firefox、chrome 等）上运行，并且没有发生错误。

完整代码：

var elem = document.getElementById('repeat');
var show = document.getElementById('show');

for (i = 1; i <= 300; i++) {
    elem.innerHTML += i + "<br/>";
}


window.onscroll = function () {
    show.innerHTML = document.body.scrollTop;
};

#show {
    display:block;
    position:fixed;
    top:0px;
    left:300px;
}

<pre id="repeat"></pre>

<div style="position:relative;">
    <div id="show">x</div>
</div>

还有 jsfiddle： http://jsfiddle.net/sqo0140j

有什么问题吗？

Answer 1

你说了一些有趣的话：

x changed to 0 and remains as is.

您的代码中唯一可能发生的情况是 onscroll 功能块进行更改，因为您的 HTML 设置了 x.

如果您的 window.onscroll = function() 确实触发了，但您没有获得正确的滚动位置（即 0），请尝试更改返回滚动位置的方式：

window.onscroll = function () {
    show.innerHTML = document.documentElement.scrollTop || document.body.scrollTop;
};

我发现 document.documentElement.scrollTop 在 Chrome 上总是 returns 0。这是因为 WebKit 使用 body 来跟踪滚动，但 Firefox 和 IE 使用 html.

请尝试更新后的代码段：

var elem = document.getElementById('repeat');
var show = document.getElementById('show');

for (i = 1; i <= 300; i++) {
    elem.innerHTML += i + "<br/>";
}


window.onscroll = function () {
    show.innerHTML = document.documentElement.scrollTop || document.body.scrollTop;
};

#show {
    display:block;
    position:fixed;
    top:0px;
    left:300px;
}

<pre id="repeat"></pre>

<div style="position:relative;">
    <div id="show">x</div>
</div>

Answer 2

对我来说，语句 document.body.scrollTop; 在 Chrome 和 Opera 中运行良好，但在 Firefox returns 0.

上运行良好

反之，语句 document.documentElement.scrollTop; 在 Firefox 上运行良好，但在 Chrome 和 Opera 上运行不佳...

可能document.body.scrollTop;FF不支持

可能的解决方案：

我试过了：

Math.max(document.body.scrollTop, document.documentElement.scrollTop);

和

 document.body.scrollTop || document.documentElement.scrollTop;

它们都适用于上述所有浏览器。

Answer 3

这个问题已经得到解答，但我想包括我的情况的详细信息，以防止 onscroll 工作。

我有一个数据容器，它有自己的滚动条，它覆盖了内置的 window 滚动条。直到我开始使用 chrome 开发人员更彻底地查看页面上的元素时，我才注意到这一点。我的外部标签看起来像这样，

这导致左侧出现两个滚动条。这是因为属性、overflow:auto 告诉数据容器制作另一个滚动条。

删除 overflow:auto 后，我现在可以正确点击 onscroll 事件。

Answer 4

我也遇到了同样的问题，但我不知道正确的原因。就我而言

window.onscroll = function () {
   console.log(document.documentElement.scrollTop || document.body.scrollTop);
 };

此代码即使在删除 margin:0; 和 padding:0; 后也不起作用。但是通过提及 document.body 上的 addEventListener 它是有效的

document.body.addEventListener('scroll',()=>{
  console.log(document.documentElement.scrollTop || document.body.scrollTop);
})

Answer 5

因为很多人使用 W3School，所以我想把它留在这里。这个简单的滚动事件没有触发

   window.onscroll = function () { myFunction() };

    var navbar = document.getElementById("navbar");
    var sticky = navbar.offsetTop;

    function myFunction() {
        if (window.pageYOffset - 20 >= sticky) {
            navbar.classList.add("sticky");
        }
    }

直到我删除了 < link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 一切又恢复正常了。

Answer 6

对于使用此功能有问题的人。它看起来不起作用的另一个原因是您多次定义它。

window.onscroll = function() {
    console.log('scroll 1');
};

// some other js code

window.onscroll = function() {
    console.log('scroll 2');
};

只有最后一个被执行，因为它覆盖了你的第一个声明。那么解决方案就是

window.addEventListener('scroll', function() {
    console.log('scroll 1');
})

window.addEventListener('scroll', function() {
    console.log('scroll 2');
})

为什么window onscroll 事件不起作用？

Why window onscroll event does not work?

javascript

events

onscroll

可能的解决方案：