25

I am trying to use 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?

Tim
  • 2,235
  • 4
  • 23
  • 28
  • 1
    i change the css so child overflows and use jquery.scroll and that works, however there is no 'scroll' event like you have for jquery not that i know of anyway, hence the reason why bin, live etc can not be set for scroll – davethecoder Feb 13 '12 at 01:35
  • Yes you can bind to scroll. http://jsfiddle.net/C6DRR/29/ – Tim Feb 13 '12 at 03:11
  • You are correct tho that delegate doesn't have a scroll method. If you update your answer, I will mark you correct. – Tim Feb 13 '12 at 04:35
  • have updated the answer for you tim – davethecoder Feb 13 '12 at 09:44
  • use .on instead of .deligate see this for solution http://stackoverflow.com/a/41958190/2386727 – Prokor Jan 31 '17 at 13:07

3 Answers3

38

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

user1087079
  • 1,358
  • 12
  • 10
31

why doesn't delegate work for scroll?

Because scroll event doesn't bubble through the DOM.

But, on modern browsers (IE>8), you can capture scroll event to e.g document level or any static container for dynamic element. You have to use javascript addEventListener() method passing true as useCapture parameter, jQuery doesn't support capturing phase:

Note: in your example, scroll event happen to #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 explanation on difference between event capture/propagation, see here or there.

Be aware, a captured event is always fired before any other bubbling event of same kind.

Community
  • 1
  • 1
A. Wolff
  • 74,033
  • 9
  • 94
  • 155
  • I just tried this (in firefox) and `event.target.id` is null and target is `HTMLDocument` so I can't filter for a given id of an element.... thoughts? – SumNeuron Feb 06 '18 at 14:48
  • @SumNeuron You have to use any filtering condition relevant to specific scrolling element you want to target. As you didn't have posted in your comment any more specific info, i can not help you more. – A. Wolff Feb 07 '18 at 16:22
  • I think there is a miscommunication. I have a few ids that I wish to filter for (e.g. el1, el2, el3, etc). However the filter you demonstrate above `event.target.id === ` doesnt work for me as `event.target.id = undefined`. – SumNeuron Feb 07 '18 at 16:39
  • @SumNeuron that means the scrolled elemet has no id attribute defined. If it's a parent or a descendant of scrolled element , you have to use any relevant transversal method. – A. Wolff Feb 07 '18 at 17:51
-3

i think this may 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);
});

as requested by op:

i change the css so child overflows and use jquery.scroll and that works, however there is no 'scroll' event like you have for jquery not that i know of anyway, hence the reason why bin, live etc can not be set for scroll and also why your deligate will not work

davethecoder
  • 3,856
  • 4
  • 35
  • 66