javascript Onscroll 功能不适用于 Chrome
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17016740/
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
Onscroll function is not working for Chrome
提问by sprabhakaran
The below code is working fine for Firefox browser. But, not chrome. What is the issue in below code ?
以下代码适用于 Firefox 浏览器。但是，不是铬。下面的代码有什么问题？
window.onload = function()
{
document.body.onscroll = Test.callFn;
}
var Test = new function()
{
this.callFn = function()
{
console.log("Calling this function");
}
}
Thanks
谢谢
回答by jcsanyi
You don't want the ()when you're assigning callFnas the onscroll handler.
You don't want to execute the function, you want to assign a reference to it.
您不希望()在指定callFn为 onscroll 处理程序时使用 。
您不想执行该函数，而是想为其分配一个引用。
In addition, onscroll for an entire document seems to work better cross-browser on the windowobject, rather than documentor document.body.
此外，整个文档的 onscroll 似乎在window对象上的跨浏览器上效果更好，而不是document或document.body。
window.onscroll = Test.callFn;
回答by alcohol is evil
I had similar problem today. You can change document.bodyto window:
我今天遇到了类似的问题。您可以更改document.body为window：
window.onload = function()
{
window.onscroll = function()
{
console.log("Calling this function");
}
}
I noticed that in chrome onscrollevent is working when bodyelement has onscrollattribute, but in IE it's working when htmlelement has onscrollattribute, so it's the best to assign onscrollevent listener to windowobject.
我注意到在 chromeonscroll中，当body元素具有onscroll属性时，事件正在工作，但在 IE 中，它在html元素具有onscroll属性时工作，因此最好将onscroll事件侦听器分配给window对象。
PS. if you want to check how many pixels you scrolled - use window.pageYOffsetinstead of document.body.scrollTop(the same situation with chrome and IE as described above).
附注。如果你想检查你滚动了多少像素 - 使用window.pageYOffset而不是document.body.scrollTop（与上面描述的 chrome 和 IE 相同的情况）。
回答by Siraj Alam
One of the possibility is there are two window.onscrollstatements on your page that each statement calling different JS method. Check the included files and all the methods that are in the page loading.
一种可能性是window.onscroll您的页面上有两个语句，每个语句调用不同的 JS 方法。检查包含的文件和页面加载中的所有方法。
回答by markwilliamsweb
I had the same issue and it was because I had overflow-x: hiddenassigned to the body. Removing this fixed the problem.
我有同样的问题，那是因为我已经overflow-x: hidden分配给了身体。删除它解决了问题。
回答by Sam M
window.onscroll does not work at times when you style an element using theheightproperty of css.
window.onscroll 有时在您使用heightcss 属性设置元素样式时不起作用。
try using min-heightor max-heightinstead.
尝试使用min-height或max-height代替。
回答by J. Bruni
In Chrome, it works if you attach the event handler to the document.onscrollevent:
在 Chrome 中，如果您将事件处理程序附加到事件，它会起作用document.onscroll：
document.onscroll = function() { console.log('Works in Chrome!'); };
document.onscroll = function() { console.log('Works in Chrome!'); };
回答by t3rmian
This might also happen when the height of htmland bodytags is set to 100% and the scroll event does not fire for window nor document. To check which element is scrolled I slightly modified Aaron Mason's snippetwhich wasn't working for me either:
当html和body标签的高度设置为 100% 并且滚动事件不会为窗口或文档触发时，也可能发生这种情况。为了检查哪个元素被滚动，我稍微修改了Aaron Mason 的片段，这对我也不起作用：
document.querySelectorAll('*').forEach(function(elem) {
elem.addEventListener('scroll', function() {
console.log(this);
});
});
