为什么不委托滚动工作？

Question

我试图使用jquery委托绑定滚动事件.

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/

为什么不起作用？

Answer 1

因为滚动事件不会冒泡. http://www.quirksmode.org/dom/events/scroll.html

Answer 2

为什么不委托滚动工作？

因为滚动事件不会通过DOM冒泡.

但是,在现代浏览器(IE> 8)上,您可以将滚动事件捕获到例如文档级别或动态元素的任何静态容器.你必须使用javascript 方法作为参数传递,jQuery不支持捕获阶段:addEventListener()trueuseCapture

注意: 在您的示例中,scroll事件发生在#parent级别,而不是#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-

有关事件捕获/传播之间差异的说明,请参阅此处或此处.

请注意,捕获的事件始终在任何其他类似的冒泡事件之前触发.

Answer 3

我想这可能会绑定你的卷轴

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

按照OP的要求：

我改变了CSS，所以子溢出并使用jquery.scroll并且可以工作，但是没有像jquery那样的“滚动”事件，无论如何我都不知道，因此bin，live等不能设置为滚动的原因以及为什么你的代表不起作用