2012-03-31 5 views

risposta

46

Per differenziare i scroll up/down in jQuery, è possibile utilizzare:

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x 
$('#yourDiv').bind(mousewheelevt, function(e){ 

    var evt = window.event || e //equalize event object  
    evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible    
    var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF 

    if(delta > 0) { 
     //scroll up 
    } 
    else{ 
     //scroll down 
    } 
}); 

Questo metodo funziona anche in div che hanno overflow:hidden.

L'ho testato con successo in FireFox, IE e Chrome.

+0

Questo funziona molto bene! Un semplice '' 'e.preventDefault()' '' inoltre non permetterà al tuo scroll di andare a qualsiasi elemento genitore (come la pagina) se vuoi solo fare qualcosa sullo scroll di una sezione e in realtà non scorrere il tuo elemento o i suoi genitori –

+0

qualche idea per questo su apple trackpad o mouse magico con overflow nascosto? http://stackoverflow.com/q/32512924/770127 – ryanve

+1

Questo non dovrebbe essere più fatto, lo sniffing del browser non è stato una buona pratica per un bel po '. C'è un altro evento cross-browser ora che sarà meglio usarlo. http://stackoverflow.com/a/33334461/3168107 – Shikkediel