Question

我想执行窗口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更改为0并保持原样。

代码中唯一可能发生的方法是onscroll功能块因为HTML设置x而进行更改。

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

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

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

请尝试更新的代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我也有同样的问题，但是我不知道是什么原因。就我而言

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 3

对我而言，document.body.scrollTop;语句在Chrome和Opera中运行良好，但在Firefox上返回0。

副主席声明document.documentElement.scrollTop;适用于Firefox，但不适用于Chrome和Opera ......

FF

可能不支持document.body.scrollTop;

可能的解决方案：

我试过了：

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

和

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

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

Answer 4

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

我有datacontainer有自己的滚动条，它覆盖了内置的窗口滚动条。直到我开始使用chrome开发人员更全面地查看页面上的元素之前，我没有注意到这一点。我的外部标签看起来像这样，

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

一旦我删除了溢出：auto我现在可以正确点击onscroll事件。

为什么窗口onscroll事件不起作用？

4 个答案:

可能的解决方案：