Javascript滚动处理程序未触发

Question

我所要做的就是在滚动DIV时调用函数。为了简单起见，我没有指定其他任何东西。此外，我只看DOM兼容的浏览器，如Chrome, Safari(不是IE)。

我的问题是滚动处理程序从未被调用。如果我将scroll替换为click，点击即可正常工作。不知怎么的，滚动条不工作了

请注意:我不能使用jQuery:(

下面是我的代码: HTML:

<div id="test">--long content--</div>

JS:

   function myFunc() {
        console.log('in myFunc');
    }
    var objTable = document.getElementById("test");
    objTable.addEventListener("scroll", function () {
        myFunc();
    }, false);

小提琴:

http://jsfiddle.net/yymg5/7/

Answer 1

这是因为窗口在滚动，而不是div。尝试将元素侦听器更改为div(在本例中是窗口)的父元素，如下所示:

window.addEventListener("scroll", function () {
    myFunc();
}, false);

Answer 2

我也遇到过类似的问题。这段代码是正确的，未定义

已经回答了

window.addEventListener("scroll", function () {
    myFunc(); 
}, false);

但是没有工作，因为

滚动事件未触发。因为我的body在滚动而不是documentElement.

我刚刚从我的body标签中删除了height: 100%，然后滚动事件开始触发

Answer 3

如果滚动事件没有触发，尽管尽了最大努力，你可以试试wheel event:

document.addEventListener('wheel', (event) => {console.log('i scrolled')});

Answer 4

在我的情况下，我有一个height: 100%在我的身体。因为我只想在一个特殊的div中应用滚动事件。

然后，这解决了这个问题:

document.querySelector('#myDiv').addEventListener('scroll', () => {
    console.log('scroll event fired!')
 });

Answer 5

我通过从html和body CSS选择器中删除height: 100%;来修复它。

Answer 6

这是因为你的div有height: 100%或height: 100vh。在这种情况下，滚动事件将自动禁用，如果你给高度:

移除div的高度，移除其父，子div的高度。基本上，那个特定的div应该滚动，而不是它的父或子div。

那么这应该可以工作。

const AppWrapper = document.getElementById('app-content');
AppWrapper.addEventListener('scroll', toggleVisibility);

toggleVisibility = () => {
   console.log('Do your thg');
};