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

Question

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 htm

Answer 1

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.