onscroll for div

Question

Does a div element not have an onscroll event handler? The behaviour on my page doesn't seem to indicate the div onscroll event handler is recognized.

<div id='bd' onscroll='alert("Scroll Called");'></div>

Also,
Do div scroll events roll up to window scroll events, as per DOM event bubbling ?

Answer 1

Depending on which version of HTML you're using, you could use the onwheel event, instead.

The onscroll event works only if all the following are true:

1. The div has overflow: auto, overflow: scroll, overflow-y: scroll, etc.
2. The div currently has a visible scrollbar that can scroll.
3. The mouse movement actually causes the scrollbar to scroll.

So the onscroll event is not really suited for detecting general mouse wheel movement.

Please note that the onwheel event is new in HTML 5. According to w3schools, it is pretty widely supported, though.

Answer 2

I scratched my head on this one too, until I started learning more about DOCTYPE directives. The onscroll attribute is not supported in most recent version of the HTML spec. It'll show as invalid syntax in Visual Studio. It might work in many browsers, but it's still invalid code.

Instead, you canan event using Javascript or jQuery. I use an approach like this to synchronize scrolling on two separate div's:

$("#gridTableContainer").scroll(function() {
    HandlingScrollingStuff();
});