window.pageYOffset始终为0,其中overflow-x:hidden

Question

我正在创建一个网页,其中包含一些只需要在特定时间滑入的屏幕外内容.为了达到这个目的,我正在overflow-x: hidden坚持下去html, body.这样,用户无法向左或向右滚动以获取内容.

但是,在应用程序的某个时刻,我还需要用户已向下滚动的数量.据我所知,这window.pageYOffset是最可靠的方法之一.

但是,当我设定overflow-x规则时.window.pageYOffset永远等于0.

难道这些东西不应该彼此无关吗？我怎样才能解决这个问题？

我在Safari,Firefox和Chrome上测试了这个.

我试过document.documentElement.scrollTop但这只适用于Firefox.

注意:

我用一个非常简单的例子无法重现这个问题.我的应用程序还有一个容器中的主要内容position: absolute.如果我删除它,一切正常.

因此,它似乎是在组合overflow-x: hidden上body,并postion: absolute在.content身体内部.

然而,我不能轻易摆脱绝对要求,因为不同的.content容器应该能够相互放置.

编辑2:它甚至更奇怪:我已经有了一个transform: translate(0,0)设置,.content以便以后可以转换到其他值.如果我删除它,一切正常!另一个看似无关的css属性会干扰.

Answer 1

我有一个类似的问题，其中发生溢出的元素的父级有overflow: hidden;. 这不是我可以删除的 CSS 属性。

我对此的解决方案是，在滚动发生时，我不是获取window.pageYOffsetor而是获取对象。从对象中，我们可以得到属性，比如document.documentElement.scrollTopEventEventscrollTope.srcElement.scrollTop

我的事件处理程序看起来像：

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

然后，将此事件绑定到发生滚动的元素。

Answer 2

我有完全相同的问题,经过长时间的搜索我解决了.

问题似乎来自overflow-x: hidden身体内部.所以为了解决这个奇怪的行为,我使用了这样的包装器:

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

然后我在包装器的CSS中移动了overflow属性,而不是让它在html,body中:

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

有了这个小技巧,当我扫描现在位于我的包装元素中的srollTop属性时,结果不再是0而是实际值.没有它,它不适用于Chrome ...