Javascript Scroll Handler not firing

Question

All I\'m trying to do is to call a function when a DIV is scrolled.For simplicity sake Im not specifying anything else. Also I am only looking at DOM compliant brow

Answer 1

I have similar issue. But in my case, I have a height: 100% on my body. Since, I just wanted to apply the scroll event in a special div only.

Then, this fixed the issue:

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

Answer 2

This is because the window is scrolling not the div. Try changing your element listener to the parent of the div (in this case the window) like this.

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

Answer 3

It happened because your div has height: 100% or height: 100vh. In that case, the scroll event will disable automatically if you gave height:

Remove that div height, Remove any height on its parent, child. Basically, that particular div should scroll not its parent or child.

then this should work.

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


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

Answer 4

i had the similar issue in my case. This code is correct but was not working because,

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

scroll event wasn't firing. since my body was scrolling instead of documentElement.

I just removed height: 100% from my body tag and then scroll event started firing.