Question

我正在创建一个网页，其中包含一些只需要在特定时间滑入的屏幕外内容。为实现此目的，我在overflow-x: hidden上设置了html, body。这样，用户无法向左或向右滚动以获取内容。

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

但是，当我设置overflow-x规则时。 window.pageYOffset始终等于0。

这些事情不应该彼此无关吗？我怎样才能解决这个问题？

我在Safari，Firefox和Chrome上测试了这个。

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

NB：

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

所以它似乎是身体内overflow-x: hidden body和postion: absolute .content的组合。

然而，我不能轻易摆脱绝对要求不同的.content容器应该可以放在一起。

编辑2：它变得更加怪异：我在transform: translate(0,0)上设置了.content，以便稍后可以转换为其他值。如果我删除它，一切正常！又一个看似无关的CSS 干扰的财产。

Answer 1

我遇到了完全相同的问题，经过长时间的搜索我解决了这个问题。

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

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

然后我在包装器的CSS中移动了溢出属性，而不是让它在html，body：

中

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

当我扫描现在位于我的包装元素中的srollTop属性时，这个小技巧，结果不再是0而是实际值。如果没有它，它就无法在Chrome上运行......

Answer 2

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

我对此的解决方案是，滚动发生时，我得到了window.pageYOffset对象，而不是得到document.documentElement.scrollTop或Event。从Event对象中，我们可以获得scrollTop属性，例如e.srcElement.scrollTop

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

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

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

window.pageYOffset始终为0，其中overflow-x：hidden

2 个答案: