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）上，您可以捕获滚动事件到例如文档级别或任何静态容器的动态元件。您必须使用j addEventListener()方法将true作为useCapture参数传递，jQuery不支持捕获阶段：

注意： 在您的示例中，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-

有关事件捕获/传播之间差异的说明，请参阅here或there。

请注意，捕获的事件总是在之前触发任何其他类似的冒泡事件。

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等不能的原因设置滚动以及为什么你的deligate不起作用

为什么不委托滚动工作？

3 个答案:

-DEMO-