Почему не делегировать работу для прокрутки?
Я пытаюсь использовать делегат 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/
Почему он не работает?
Ответы
Ответ 1
Я думаю, что это может связывать ваш свиток
$('#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 не будет работать
Ответ 2
Потому что событие прокрутки не пузырится.
http://www.quirksmode.org/dom/events/scroll.html
Ответ 3
почему не делегировать работу для прокрутки?
Поскольку событие прокрутки не проходит через DOM.
Но, в современных браузерах (IE > 8) вы можете захватить прокрутить событие, например, на уровень документа или любой статический контейнер для динамического элемент. Вы должны использовать метод javascript 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*/);
Для объяснения различий между захватом/распространением событий см. здесь или there.
Помните, что захваченное событие всегда запускается перед любым другим событием барботирования такого же типа.