Onscroll功能不适合Chrome

Onscroll function is not working for Chrome

本文关键字：Chrome 不适合 功能 Onscroll      更新时间：2023-09-26

下面的代码在Firefox浏览器中运行良好。但是，不是铬。下面代码中的问题是什么?

window.onload = function()
{
   document.body.onscroll =  Test.callFn;
}
var Test = new function()
{
   this.callFn = function()
   {
      console.log("Calling this function");
   }
}

谢谢

我今天也遇到了类似的问题。您可以将document.body更改为window:

window.onload = function()
{
   window.onscroll = function()
   {
      console.log("Calling this function");
   }
}

我注意到，在chrome onscroll事件工作时，body元素具有onscroll属性，但在IE中，当html元素具有onscroll属性时，它的工作，所以最好将onscroll事件监听器分配给window对象。

p。如果你想检查你滚动了多少像素-使用window.pageYOffset而不是document.body.scrollTop(与上面描述的chrome和IE相同的情况)。

我有同样的问题，这是因为我有overflow-x: hidden分配给身体。

当你分配callFn作为onscroll处理程序时，你不希望()。
你不想执行这个函数，你想给它赋值一个引用。

此外，整个文档的onscroll似乎在window对象上的跨浏览器效果更好，而不是document或document.body。

window.onscroll = Test.callFn;

窗口。当你使用css的height属性设置元素样式时，onscroll有时不起作用。

尝试使用min-height或max-height代替。

一种可能性是在您的页面上有两个window.onscroll语句，每个语句调用不同的JS方法。检查页面加载中包含的文件和所有方法

当html和body标签的高度被设置为100%并且滚动事件没有为窗口和文档触发时，也可能发生这种情况。为了检查哪个元素被滚动，我稍微修改了Aaron Mason的代码片段，它也不适合我:

document.querySelectorAll('*').forEach(function(elem) {
    elem.addEventListener('scroll', function() {
        console.log(this);
    });
});

在Chrome中，如果您将事件处理程序附加到document.onscroll事件:

document.onscroll = function() { console.log('Works in Chrome!'); };

尝试使用 window.onwheel 函数。

当你使用window.onscroll你必须首先能够在窗口中滚动。因此，window . onscroll

当鼠标滚轮在对象上转动时，window.onwheel函数被激活。在这个例子中，对象是window，所以当你滚动时在窗口中，它将运行该函数。

另外，您可能想要删除 window.onload ，因为该函数仅在加载窗口时运行。

使用window.onwheel函数滚动的示例代码如下:

window.onwheel = ()=>{
    alert("Scrolling")
}
<p>Scroll here!</p>

您还可以通过执行以下操作来查找滚动方向(向上，向下):

window.onwheel = (e)=>{
    //deltaX shows the amount scrolled right-left
    //deltaY shows the amount scrolled up-down
    console.log(e.deltaX(), e.deltaY())
}

相关文章：