Can't delegate scroll event using jQuery

Question

I'm trying to use jQuery to fire an event on scroll on a particular class of elements, like so:

$('body').on('scroll', '.overflow', function() { do stuff; });

However, do stuff never happens. I've done a little experimentation, and it looks as though the scroll event can't be delegated using .on . (see http://jsbin.com/aJeDiru/2 for a test case).

Is there a way that I can get it to delegate? Or is there a Very Good Reason™ why it should never be set up to delegate in this fashion?

Answer 1

According to W3 , the scroll event doesn't bubble.

Since event delegation relies on the event bubbling to the element you've attached the handler to, you won't be able to use delegation.

Answer 2

Use "mousewheel" instead,
make sure #contents is on the main html file.

    $("#contents").on('mousewheel',function(e) {
    if(e.originalEvent.wheelDelta /120 > 0) {
         //do something to the loaded elements
     } else {
        //do something to the loaded elements
     }
});