发表新帖
发表新帖

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

前端 未结
关注
2 1754
礼貌的吻别
礼貌的吻别 2021-02-13 18:44

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

相关标签:
2条回答
  • 粉色の甜心
    2021-02-13 18:58

    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.

    0 讨论(0)
  • 我在风中等你
    2021-02-13 19:11

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

    0 讨论(0)
 看不清?
提交回复
热议问题