overflow-x: hidden is breaking jquery scroll event

Question

I am having an issue where setting overflow-x: hidden on the html and body elements is preventing the jquery scroll event from firing.

CSS:

html, body {
  overflow-x: hidden;
}

JS:

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

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

Try it for yourself: Comment out overflow-x: hidden and pop open your console. You should see "scrolling" logged as you scroll up and down the html box. Comment it back in and the scroll event is silent.

Does anyone know why this is happening? I'm aware that when you set overflow to hidden it disables scrolling, but it should only do it for the axis that you are setting (x only in this case). Thanks in advance for any help.

Answer 1

Had the same problem. Solution is to remove the overflow-x: hidden from the html element and leave it only on the body element and it should work.

Answer 2

I have also found this to be the case. When we added:

body {
  overflow-x: hidden;
}

all window.addEventListener('scroll') events stopped triggering. I believe this it is because the scroll event is not moved to the document.body. When I change the eventListener to document.body.addEventListener('scroll'), things start working again. The interesting thing is that my event.bubbles boolean is false. From what I read the scroll event should bubble to the window.

Solution

change

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

to

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

Answer 3

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