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.

More specifically, your window isn't scrolling, your html/body are. If you remove the `height: 100%;` your window scrolling will work fine. — Chad, Jul 15 '13 at 22:42
when you set overflow-x: hidden, the scrollbar you see is for the body. Shrink the height, and you'll see two scrollbars, one for body, one for window. So ... what Torr3ent said. http://jsfiddle.net/r7Fqq/7/ — Dom Day, Jul 15 '13 at 22:50
Looks like similar issue, please have a look: http://stackoverflow.com/a/37185706/2050359 — rtrukhin, May 12 '16 at 13:22
removing the height: 100%; in html/body css rules solved my issue. — Dushan, Oct 12 '21 at 05:07

score 26 · Answer 1 · answered Dec 09 '15 at 23:02

26

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.

answered Dec 09 '15 at 23:02

MSwehli

483
4
12

2

Yep. Worked for me. No idea why thought. In theory, `overflow-x` should only affect horizontal scrolling, no? – jeteon Dec 25 '16 at 00:03
Otherwise, leave it only on the `html`. – Alex78191 Jun 10 '17 at 22:19
I was experiencing issues with detecting the window scroll event when styling both the `html` and `body` with overflow scroll styles. – Daniel Dewhurst Sep 20 '17 at 08:59

score 11 · Answer 2 · answered Oct 18 '17 at 18:49

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

score 3 · Answer 3 · answered Oct 26 '13 at 14:30

3

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

answered Oct 26 '13 at 14:30

fritsMaister

532
1
4
18

Thanks, just what I need! In my case it was mandatory to have overflow hidden (x and y) on the whole document but needed to capture the scroll/mousewheel event to show an alert. – Javier Pallarés Sep 06 '19 at 10:47

score 0 · Answer 4 · edited May 23 '17 at 11:46

0

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

edited May 23 '17 at 11:46

Community

1
1

answered Nov 28 '16 at 03:28

Abhishek Sinha

5,095
1
15
14

score 0 · Answer 5 · answered Mar 02 '20 at 11:44

0

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

answered Mar 02 '20 at 11:44

Ravgeet Dhillon

532
2
6
24

score 0 · Answer 6 · answered Sep 01 '22 at 10:14

For coming next visitors. I struggled with this issue a bit and I found that when the event is triggered on the element with the overflow then it solve the issue. I thought what might causing the issue and I have a guess about that, because the overflow is creating a layer stack of it's own separated from the body then when you scroll on the element and only when you meet the top or the bottom of the element it's actually trigger the window scroll event on the body which is on scroll top 0 or bottom end. So if the scroll event was on the element it would work:

document.getElementById('el').addEventListener('scroll', ()=>{console.log('scrolling')})

overflow-x: hidden is breaking jquery scroll event

6 Answers6

Linked