Javascript 为什么窗口 onscroll 事件不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29718833/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why window onscroll event does not work?
提问by Lion King
I want to execute the window onscrollevent, but I don't know why it doesn't work on all browsers(firefox, chrome, etc), and there is no errors occurred.
我想执行 windowonscroll事件，但我不知道为什么它在所有浏览器（firefox、chrome 等）上都不起作用，并且没有发生错误。
Full code:
完整代码：
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>Also jsfiddle: http://jsfiddle.net/sqo0140j
还有jsfiddle：http: //jsfiddle.net/sqo0140j
What is the problem ?
问题是什么 ？
回答by Drakes
You said something interesting:
你说了一件有趣的事：
x changed to 0 and remains as is.
x 更改为 0 并保持原样。
The only way in your code that can happen is if the onscrollfunction block makes a change because your HTML sets x.
代码中唯一可能发生的情况是onscroll功能块发生更改，因为您的 HTML 设置了 x。
If your window.onscroll = function()is indeed firing, but you are not getting the right scroll position (i.e. 0), try changing the way the scroll position is returned:
如果您window.onscroll = function()确实在触发，但没有获得正确的滚动位置（即 0），请尝试更改返回滚动位置的方式：
window.onscroll = function () {
show.innerHTML = document.documentElement.scrollTop || document.body.scrollTop;
};
I found out that document.documentElement.scrollTopalways returns 0 on Chrome. This is because WebKit uses bodyfor keeping track of scrolling, but Firefox and IE use html.
我发现document.documentElement.scrollTop在 Chrome 上总是返回 0。这是因为 WebKitbody用于跟踪滚动，而 Firefox 和 IE 使用html.
Please try your updated snippet:
请尝试您更新的代码段：
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>回答by willy wonka
For me the statement document.body.scrollTop;works well in Chrome and Opera, but on Firefox returns 0.
对我来说，该语句document.body.scrollTop;在 Chrome 和 Opera 中运行良好，但在 Firefox 上返回 0。
Viceversa the statement document.documentElement.scrollTop;works good on Firefox but not in Chrome and Opera...
反之亦然，该声明document.documentElement.scrollTop;在 Firefox 上运行良好，但在 Chrome 和 Opera 中不起作用......
Maybe document.body.scrollTop;is not well supported by FF
document.body.scrollTop;FF可能不太支持
Possible Solutions:
可能的解决方案：
I tried:
我试过：
Math.max(document.body.scrollTop, document.documentElement.scrollTop);
and
和
document.body.scrollTop || document.documentElement.scrollTop;
They both works well on all above browsers.
它们都适用于上述所有浏览器。
回答by Bryan Harrington
This question has been answered, but I wanted to include details of my situation that prevent onscroll from working.
这个问题已经得到回答，但我想包括我的情况的详细信息，这些情况会阻止 onscroll 工作。
I have datacontainer that had its own scroll bar which overrides the built in window scroll bar. I didnt notice this until I started giving a more thorough look at the elements on the page using chrome developer. My outer tag looked like this,
我有数据容器，它有自己的滚动条，它覆盖了内置的窗口滚动条。直到我开始使用 chrome developer 更彻底地查看页面上的元素时，我才注意到这一点。我的外标签看起来像这样，
This caused two scroll bars to appear on the left. This was because the property, overflow:auto, was telling the data container to make another scroll bar.
这导致左侧出现两个滚动条。这是因为属性 overflow:auto 告诉数据容器制作另一个滚动条。
Once I removed the overflow:auto I could now correct hit the onscroll event.
一旦我删除了 overflow:auto 我现在可以正确地点击 onscroll 事件。
回答by N.Balgopal Patro
I had also the same problem , but I didn't know the proper reason for that . In my case
我也有同样的问题，但我不知道正确的原因。就我而言
window.onscroll = function () {
console.log(document.documentElement.scrollTop || document.body.scrollTop);
};
this code didn't work even after removing margin:0;and padding:0;.
But by mention the addEventListener on the document.body it is worked
即使在删除margin:0;和之后，此代码也不起作用padding:0;。但是通过在 document.body 上提到 addEventListener 它是有效的
document.body.addEventListener('scroll',()=>{
console.log(document.documentElement.scrollTop || document.body.scrollTop);
})
