27

我要做的就是在DIV滚动 a 时调用一个函数。为简单起见，我没有指定其他任何内容。此外，我只关注 DOM 兼容的浏览器，例如 Chrome、Safari（不是 IE）。

我的问题是滚动处理程序永远不会被调用。如果我替换scrollto 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/

4

5 回答 5

34

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

window.addEventListener("scroll", function () {
    myFunc();
}, false);
于 2013-03-07T16:13:08.623 回答
18

在我的情况下，我遇到了类似的问题。此代码是正确的，已由Undefined回答

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

但它不起作用，因为，

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

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

于 2018-08-09T06:44:15.083 回答
3

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

然后，这解决了问题：

document.querySelector('#myDiv').addEventListener('scroll', () => {
    console.log('scroll event fired!')
 });
于 2019-11-26T12:44:40.503 回答
3

我通过删除height: 100%;表单html和bodyCSS 选择器来修复它。

于 2021-03-04T11:06:25.027 回答
1

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

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

那么这应该工作。

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


toggleVisibility = () => {
   console.log('Do your thg');
};
于 2021-02-11T06:50:14.897 回答