Why not delegate work to scroll?

Question

I am trying to use a jquery delegate to bind to scroll events.

HTML

<div id='parent'> <div id='child'>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah </div> </div> 

CSS

 #parent { width:200px; height:200px; border:2px solid black; overflow:auto; } #child { width:300px; height:300px; background:red; } 

Javascript

 $('#parent').delegate('#child', 'scroll', function(){ alert(this) }) 

jsfiddle

http://jsfiddle.net/C6DRR/1/

Why doesn't it work?

Answer 1

I think it can bind your scroll

 $('#child').live('keyup', function() { var el = $(this); if (!el.data("has-scroll")) { el.data("has-scroll", true); el.scroll(function(){ //doscrollaction(el); }); } doscrollaction(el); }); 

upon request op:

I change css so that it happens with child overflows and uses jquery.scroll, and it works, however there is no “scroll” event like you have for jquery, which I don't know anyway, therefore the reason bin is. live etc. there cannot be a scroll set, and also why your deligate will not work

Answer 2

Because the scroll event does not bubble. http://www.quirksmode.org/dom/events/scroll.html

Answer 3

why not delegate work to scroll?

Since the scroll event does not go through the DOM.

But , in modern browsers (IE> 8) you can capture a scroll event , for example, at the document level or any static container for a dynamic element. You must use the javascript addEventListener() method, passing true as the useCapture parameter, jQuery does not support the capture phase:

Note: in your example, the scroll event occurs at #parent level, not #child

 document.addEventListener('scroll', function (event) { if (event.target.id === 'parent') { // or any other filtering condition console.log('scrolling', event.target); } }, true /*Capture event*/); 

-DEMO -

For an explanation of the differences between event capture / propagation, see here or there .

Remember that a captured event always fires before any other bubbling event of the same type.