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 的父级（在本例中为窗口），例如 this。

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

Answer 2

我的案例也有类似的问题。此代码是正确的，已由 Undefined

回答

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

但它不起作用，因为窗口滚动事件没有触发，因为主体正在滚动而不是 documentElement。

我刚刚从我的 body 标签中删除了

height: 100%;

样式，然后滚动事件开始触发。

Answer 3

如果尽管尽了最大努力，scroll事件仍未触发，那么您可以尝试wheel事件：

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

我通过删除

height: 100%;

表单

html

和

body

CSS 选择器来修复它。

Answer 6

发生这种情况是因为您的 div 有

height: 100%

或

height: 100vh

。 在这种情况下，如果您指定高度，滚动事件将自动禁用：

删除该 div 高度，删除其父级、子级的任何高度。基本上，该特定的 div 不应该滚动其父级或子级。

那么这应该可以工作。

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


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