Przechwytywanie zdarzeń koła przewijania

Question

Chcę przechwycić zdarzenie, gdy użytkownik przewija swoje kółko przewijania w sytuacji, gdy strona nie przewija się/nie można przewijać. Jednak standardowe zdarzenie przewijania JS jest uruchamiane tylko wtedy, gdy przeglądarka faktycznie przewija i nie uruchomi elementu DOM, który ma ukryty przepełnienie.

Mapy Google "przewijanie do powiększenia jest przykładem zachowania, którego szukam.

Czy ktoś ma pomysł, jak osiągnąć coś takiego?

Dzięki.

Answer 1

Można uchwycić myszy -wheel wydarzenie dobrze:

$('#yourElement').on('DOMMouseScroll mousewheel', function() { 
    ... 
}); 

żywo demo:http://jsfiddle.net/chtNP/1/

(. Używam jQuery związać obsługi zdarzeń, ale działa niezależnie od API używać, oczywiście)

Answer 2

Z jQuery można użyć this plugin lub dowolnej liczby podobnych, które robią to samo.

Jeśli jQuery lub podobna struktura nie jest opcją, jest to możliwe, ale przygotuj się na świecie bólu, gdy chcemy, aby to działa w więcej niż jednej przeglądarce ...

Answer 3

W tej chwili Firefox definiuje zdarzenia DOMMouseScroll i koła. Chrome, Opera i IE (najnowsze, ponownie!) określają kółko myszy.

To jak to zrobiłem:

if(window.onwheel !== undefined) { 
    window.addEventListener('wheel', onMouseWheel) 
} else if(window.onmousewheel !== undefined) { 
    window.addEventListener('mousewheel', onMouseWheel) 
} else { 
    // unsupported browser 
} 

Należy pamiętać, że wsparcie addEventListener w starszych wersjach IE potrzebuje PolyFill. Alternatywnie możesz użyć starego window.mousewheel = function() {} lub jakiejkolwiek innej metody.

Jak widać, detektor zdarzeń jest dołączony do obiektu okna. Nie można go dołączyć do elementów, w sposób między przeglądarkami. Możesz użyć właściwości target obiektu zdarzenia, aby zobaczyć, gdzie została wywołana, i zrobić filtr na tej podstawie.

PS: Jeszcze jedna uwaga w różnych przeglądarkach: W IE trzeba użyć właściwości "wheelDelta" (i odwrócić ten znak!) Wewnątrz obiektu zdarzenia podczas przetwarzania go w funkcji wywołania zwrotnego ("onMouseWheel"). Inne przeglądarki zapełnią "deltaY" (lub "deltaX" dla przewijania w poziomie).