overflow-x: ukryty zrywa przerwanie jquery scroll

Question

Mam problem z ustawieniem overflow-x: hidden na html i elementach body uniemożliwia odpalenie zdarzenia jquery scroll.

CSS:

html, body { 
    overflow-x: hidden; 
} 

JS:

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

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

Wypróbuj go dla siebie: komentarz na przepełnienie-x: hidden i pop otworzyć konsolę. Powinieneś zobaczyć "przewijanie" rejestrowane podczas przewijania w górę iw dół pola html. Skomentuj go ponownie, a wydarzenie przewijania jest ciche.

Czy ktoś wie, dlaczego tak się dzieje? Zdaję sobie sprawę, że po ustawieniu przepełnienia na ukryty wyłącza przewijanie, ale powinno to robić tylko dla osi, którą ustawiasz (x tylko w tym przypadku). Z góry dziękuję za pomoc.

Answer 1

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

Answer 2

Miał ten sam problem. Rozwiązaniem jest usunięcie overflow-x: ukryte w elemencie HTML i pozostawienie go tylko na elemencie body i powinno działać.

Answer 3

Zestaw body {height: 100%;} w css. Wtedy by działało. Możesz zastosować właściwość przepełnienia na div, a nie na całym ciele, a następnie odpowiednio zmienić kod JS. Ustawienie właściwości przepełnienia na ciele powoduje utratę zdolności przewijania. Innym rozwiązaniem może być wykorzystanie zdarzenia koła Jquery opisanego w tym artykule (https://stackoverflow.com/a/8378946/5348972).

Answer 4

Też znalazłem, że tak jest. Gdy dodaliśmy:

body { 
    overflow-x: hidden; 
} 

wszystkie window.addEventListener('scroll') zdarzenia zatrzymane wyzwalanie. Uważam, że dzieje się tak dlatego, że zdarzenie przewijania nie zostało przeniesione do document.body. Kiedy zmienię eventListener na document.body.addEventListener('scroll'), wszystko znów zacznie działać. Interesujące jest to, że moje event.bubbles boolean jest fałszywe. Z tego, co przeczytałem, zdarzenie przewijania powinno być wyświetlane w oknie.

Rozwiązanie

zmiana

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

do

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