window.pageYOffset is always 0 with overflow-x: hidden

13
votes

I'm creating a webpage that has some off-screen content that only needs to slide in at specific times. To achieve this I'm setting overflow-x: hidden on html, body. This way the user cannot scroll left or right to get at the content.

However, at some point in the application I also need the amount that the user has scrolled down yet. As far as I know window.pageYOffset is one of the most reliable ways of doing this.

However, when I set the overflow-x rule. window.pageYOffset is always equal to 0.

Shouldn't these things be pretty unrelated to each other? How can I fix this?

I've tested this on Safari, Firefox and Chrome.

I've tried document.documentElement.scrollTop but this only worked on Firefox.

NB:

I was not able to reproduce the problem with a very simple example. My app also has the main content in a container that has position: absolute. If I remove this, everything works.

So it seems to be the combination of overflow-x: hidden on body and postion: absolute on the .content inside the body.

I cannot easily get rid of the position absolute requirement however, since different .content containers should be able to be placed over one another.

Edit 2: It gets even weirder: I've got a transform: translate(0,0) set on .content to be be able to transition to some other value later. If I remove this, everything works fine! Yet another seemingly unrelated css property that interferes.

2
javascriptcssscroll
I found my issue was that I had overflow-x: hidden on both html and body. If I moved it to just html, it was fine. However, IE11 would now ignore it, meaning I had to add an additional overflow-x: hidden to an internal element. As another note, it was due to adding flex and sticky footer stuff that caused this bug to manifest itself. Translates and position absolutes probably affect it too. - Matt Fletcher

2 Answers

9
votes

I had the exact same problem and i resolved it after a long search.

The problem seems to comes from overflow-x: hidden inside the body. So to fix this strange behavior i used a wrapper like this :

<body>
   <div class="myWrapper">
      All your content here
   </div>
</body>

and then I moved the overflow attribute in the wrapper's CSS instead of letting it in html, body :

html, body {
    margin:0;
    padding:0;
    height: 100%;
}
.wrapper {
    height: 100%;
    overflow-x: hidden;
}

With this little trick when i scan my srollTop propertie now located in my wrapper element, the result is no longer 0 but the real value. Without that it doesn't work on Chrome ...

9
votes

I have a similar issue where the parent of the element where the overflow happens has overflow: hidden;. It's not a CSS attribute I can just remove.

My solution to this is, instead of getting window.pageYOffset or document.documentElement.scrollTop, I get the Event object when the scroll is happening. From the Event object, we can get scrollTop property, like e.srcElement.scrollTop

My event handler looks something like:

onScroll(e) {
  if (e.srcElement.scrollTop > 8) {
    // do something
  }
}

Then, bind this event to the element where the scroll is happening.