Cattura della rotella di scorrimento Eventi

Question

Voglio catturare un evento quando un utente fa scorrere la rotella di scorrimento in una situazione in cui la pagina non scorre/non è scorrevole. Tuttavia, l'evento di scorrimento JS standard si attiva solo quando il browser scorre effettivamente e non si attiva per un elemento DOM in stile in cui l'overflow è nascosto.

Lo scorrimento per ingrandire le mappe di Google è un esempio del tipo di comportamento che sto cercando.

Qualcuno ha qualche idea su come realizzare qualcosa di simile?

Grazie.

Answer 1

È possibile catturare il mouse evento -wheel bene:

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

demo dal vivo:http://jsfiddle.net/chtNP/1/

(. sto usando jQuery per legare il gestore di eventi, ma funziona a prescindere da quale API si utilizza, ovviamente)

Answer 2

Con jQuery, è possibile utilizzare this plugin, o un qualsiasi numero di quelli simili che fanno la stessa cosa.

Se jQuery o di un quadro simile non è un'opzione, è possibile, ma preparatevi per un mondo di dolore quando si desidera farlo funzionare in più di un browser ...

Answer 3

In questo momento, Firefox definisce DOMMouseScroll e gli eventi wheel. Chrome, Opera e IE (più recenti, ancora!) definiscono la rotellina del mouse.

Ecco come ho fatto:

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

Nota che il sostegno addEventListener nelle vecchie versioni di IE ha bisogno di un polyfill. In alternativa puoi usare il vecchio window.mousewheel = function() {} o qualsiasi altro metodo.

Come si può vedere, il listener di eventi è collegato all'oggetto della finestra. Non puoi collegarlo agli elementi, in modo cross-browser. È possibile utilizzare la proprietà target dell'oggetto evento per vedere dove è stata attivata e fare un filtro su quella base.

PS: un'altra considerazione cross-browser: in IE, è necessario utilizzare la proprietà "wheelDelta" (e invertire il suo segno!) All'interno dell'oggetto evento durante l'elaborazione nella funzione di callback ("onMouseWheel"). Altri browser popoleranno "deltaY" (o "deltaX" per lo scorrimento orizzontale).