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 browsers like Chrome, Safari (not IE).

MY problem is that the scroll handler never gets called. If I replace the scroll to click , it works when I click. Somehow the scroll is not working.

Please note: I cannot use jQuery :(

Here is my code:

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/

Michaelmas

for people who still get trouble - check: https://mcmap.net/q/375093/-why-doesn-39-t-window-addeventlistener-39-scroll-39-this-somescrollhandler-false-work-on-ie-10 – Calcutta

Answer 1

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

Haggadist

Thanks, you're right. I added an overflow attribute to my DIV and added some content.Now it works even on the DIV object. Have updated the fiddle. – Michaelmas

The anonymous function is unnecessary. You can just pass myFunc as a first order function: window.addEventListener('scroll', myFunc, false); – Responsory

Answer 2

i had the similar issue in my case. This code is correct, already answered by Undefined

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

but it wasn't working because window scroll event wasn't firing, since the body was scrolling instead of documentElement.

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

Abdication

@ElliotSchep i was focusing on height: 100% property of body. – Abdication

Okay. Maybe a comment would have been better though? – Requital

Had the same issue, and the css height: 100%; was the problem. Thanks for the fix! – Sexpartite

You legend. I had this same issue in my Nexjtjs app! Removed height: 100% in the __next div and it then worked. This was trolling me for a while. Thank you! – Ezequiel

Answer 3

If the scroll event is not firing despite best efforts then you could instead try wheel event:

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

Roughcast

Answer 4

In my case, I have a height: 100% in 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!')
 });

Loren

Answer 5

I fixed it by removing height: 100%; from html and body CSS selectors.

Hagai

Answer 6

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.addEventListener('scroll', toggleVisibility);


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

Almira