firefox + jquery mousewheel scroll bug di eventi

AGGIORNAMENTO Correzione di lavoro come suggerito da David (vedi sotto):

sostituire

$('.scrollMe').bind("mousewheel DOMMouseScroll", ...) 

con

  $('.scrollMe').bind("mousewheel DOMMouseScroll MozMousePixelScroll", ...) 

POST ORIGINALE

Firefox 16.0.2 (più recente) mostra un problema durante il binding dell’evento “mousewheel / DOMMouseScroll”. Scorrendo con la rotellina del mouse mentre il puntatore del mouse si trova sulla parte superiore del mio target div si fa scorrere anche la finestra, mentre ovviamente non lo voglio.

Ho provato ad aggiungere diversi metodi per fermare la propagazione ecc. Ma nulla sembra funzionare.

Codice Javascript:

  $(document).ready(function() { $('.scrollMe').bind("mousewheel DOMMouseScroll", function(e) { e.stopImmediatePropagation(); e.stopPropagation(); e.preventDefault(); var delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail); $(this).empty(); return false; }); }); 

Per vederlo in azione, segui il link jsFiddle sotto. Nella pagina di esempio, posiziona semplicemente il puntatore del mouse all’interno del div con le caselle rosse e usa la rotellina del mouse. Firefox farà scorrere la finestra principale la prima volta (in modo imprevisto), mentre gli altri browser no.

Esempio di codice jsFiddle

Particolare è che Firefox non ripeta il comportamento una volta che si triggers l’evento sull’elemento associato, il che significa che smette di scorrere la pagina. Tuttavia, ripete questo comportamento dopo averlo fatto scorrere manualmente la pagina in seguito e riprovare.

Ho anche provato questo in IE9 e Chrome ma non ho potuto rilevare questo problema in quei browser (nel senso che non scorrono inaspettatamente la finestra), quindi suppongo che sia specifico di Firefox (anche disabilitato ogni plugin in Firefox ecc. )

Questo è veramente un bug in firefox (e se è così c’è un hack cross-browser che potrebbe fare il trucco)? Oppure, se sei a conoscenza di qualsiasi altra soluzione per ottenere lo stesso effetto di catturare l’evento della rotellina di mouse senza dover scorrere la finestra della pagina, non esitare a rispondere!

Non riesco a riprodurre questo bug nel mio OS X FF 16.01 usando un touch pad (il Fiddle funziona bene), ma so che c’è un altro evento specifico di Mozilla chiamato MozMousePixelScroll . Potresti voler provare a coinvolgere anche quello.

Ci sono anche altre informazioni disponibili su MDN: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScroll

Come sidenote, penso che l’interruzione dell’azione predefinita usando e.preventDefault() dovrebbe essere sufficiente, non c’è bisogno di interrompere le propagazioni (a meno che non ci siano altri bug specifici di IE).

Leggendo https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScroll sembra che MozMousePixelScroll DOMMouseScroll sia per firefox 16 o precedenti. Per firefox> 17 usa l’evento wheel .

 $(document).ready(function() { $('.scrollMe').bind("wheel mousewheel", function(e) { e.preventDefault(); var delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail); $(this).empty(); return false; }); }); 

Questa risposta a questa domanda, ha la maggior parte della soluzione compatibile con i browser che ho trovato:

Come rilevare la direzione di scorrimento

  $('#elem').on( 'DOMMouseScroll mousewheel', function ( event ) { if( event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0 ) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY //scroll down console.log('Down'); } else { //scroll up console.log('Up'); } //prevent page fom scrolling return false; }); 

Questa risposta è una soluzione crossbrowsing su Chrome, Firefox e iExplorer

 var handlerMousewheel = function(){ $(".item").on("wheel mousewheel", function(event) { event.preventDefault(); var deltaY = event.originalEvent.deltaY; var wheelDeltaY = event.originalEvent.wheelDeltaY; if( deltaY == 100 && wheelDeltaY == -120 || deltaY > 0 && wheelDeltaY == undefined ) { $(".wrapper").animate({"margin-left":"0%"},{duration:100}); }else if(deltaY == -100 && wheelDeltaY == 120 || deltaY < 0 && wheelDeltaY == undefined){ $(".wrapper").animate({"margin-left":"50%"},{duration:100}); } }); } handlerMousewheel(); 
 .container{ display:block; width:100%; height:200px; overflow-x:hidden; overflow-y:scroll; background-color: grey; } .wrapper{ display:block; overflow:hidden; background-color:#a3cfef; padding: 2%; width:50%; margin:0 auto; } .item{ width:100%; height:50px; margin:2px 0; display:block; overflow:hidden; border:3px solid #ad08a6; }