Cannot delegate scroll event using jQuery

Question

I am trying to use jQuery to fire an event to scroll through a specific class of elements, for example:

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

However, do stuff never happens. I did a little experimentation, and it looks like the scroll event cannot be delegated using .on . (see http://jsbin.com/aJeDiru/2 for a test case).

Is there a way I can delegate it? Or is there a very good mind ™ why should it never be set up to delegate this way?

Answer 1

According to W3, the scroll event does not bubble.

Since event delegation is based on an event bubble for the element to which you have attached a handler, you cannot use delegation.

Answer 2

Use "mousewheel" instead
make sure #contents is in 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 } });