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/

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

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 was not working because,

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.