overflow-x: hidden interrompe jquery scroll event

Question

Ho riscontrato un problema in cui l'impostazione overflow-x: hidden sugli elementi html e body impedisce l'attivazione dell'evento jquery scroll.

CSS:

html, body { 
    overflow-x: hidden; 
} 

JS:

$(function(){ 
    $(window).on("scroll", function(e){ 
    console.log("scrolling");  
    }); 
}); 

http://jsfiddle.net/r7Fqq/6/

provare di persona: come commento di overflow-x: nascosto e pop aprire la console. Dovresti vedere lo "scorrimento" registrato mentre scorri verso l'alto e verso il basso nella casella html. Commentalo nuovamente e l'evento di scorrimento è silenzioso.

Qualcuno sa perché questo sta accadendo? Sono consapevole del fatto che quando si imposta overflow su hidden disabilita lo scrolling, ma dovrebbe farlo solo per l'asse che si sta impostando (x solo in questo caso). Grazie in anticipo per qualsiasi aiuto.

Answer 1

$(function() { 
    $(window).bind('mousewheel', function(event, delta) { 
     console.log("mousewheel"); 
     return false; 
    }); 
}); 

Answer 2

Aveva lo stesso problema. La soluzione è rimuovere l'overflow-x: nascosto dall'elemento html e lasciarlo solo sull'elemento body e dovrebbe funzionare.

Answer 3

Impostare body {height: 100%;} in css. Funzionerebbe allora. È possibile che si desideri applicare la proprietà di overflow su una divisione rispetto a tutto il corpo e quindi modificare di conseguenza il codice JS. L'impostazione di una proprietà di overflow sul corpo toglie la sua capacità di scorrimento. Un'altra soluzione può essere l'utilizzo di un evento wheel Jquery come descritto in questo post (https://stackoverflow.com/a/8378946/5348972).

Answer 4

Ho anche trovato questo il caso. Quando abbiamo aggiunto:

body { 
    overflow-x: hidden; 
} 

tutti window.addEventListener('scroll') eventi smesso di attivazione. Credo che sia perché l'evento di scorrimento non viene spostato allo document.body. Quando cambio eventListener su document.body.addEventListener('scroll'), le cose ricominciano a funzionare. La cosa interessante è che il mio evento.bubbles boolean è falso. Da quello che ho letto, l'evento di scorrimento dovrebbe apparire come una bolla alla finestra.

Soluzione

cambiamento

window.addEventListener('scroll',() => console.log('MEOW')) 

a

document.body.addEventListener('scroll',() => console.log('MEOW'))