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);

FIDDLE：

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

Answer 1

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

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

Answer 2

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

Answer 3

我遇到类似的问题

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

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

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

Answer 4

我有类似的问题。但就我而言，我身上有height: 100%。从那以后，我只想在一个特殊的div中应用滚动事件。

然后，此问题已解决：

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

Answer 5

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

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

那么这应该可以工作。

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


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

Javascript Scroll Handler没有触发

5 个答案: