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, bod         


        

Answer 1

Set body {height: 100%;} in css. It would work then. You may want to apply overflow property on a div than to whole body and then change JS code accordingly. Setting a overflow property on body takes away its scrolling ability. Another solution can be using Jquery wheel event as described in this post- (https://stackoverflow.com/a/8378946/5348972).

Answer 2

Just add min-height: 100% to the body tag. Everything would be back on track.

Answer 3

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

Answer 4

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 5

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'))