CODEWITHSUNDEEP
jqueryhtmlcssscrolloverflow
jlarusso
jlarusso

Reputation: 221

overflow-x: hidden is breaking jquery scroll event

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.

Upvotes: 22

Views: 19080

Answers (6)

Eran Or
Eran Or

Reputation: 1532

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

Upvotes: 0

Ravgeet Dhillon
Ravgeet Dhillon

Reputation: 590

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

Upvotes: 0

Matt Goo
Matt Goo

Reputation: 1136

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

Upvotes: 11

Abhishek Sinha
Abhishek Sinha

Reputation: 5123

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

Upvotes: 0

MSwehli
MSwehli

Reputation: 513

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.

Upvotes: 26

fritsMaister
fritsMaister

Reputation: 542

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

Upvotes: 3

Related Questions