window.pageYOffset 始终为 0，溢出 x: 隐藏

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

本文关键字：溢出 隐藏 pageYOffset window      更新时间：2023-09-26

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

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

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

这些事情不应该彼此无关吗？我该如何解决这个问题？

我已经在Safari，Firefox和Chrome上对此进行了测试。

我已经尝试过document.documentElement.scrollTop但这仅适用于火狐。

铌：

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

所以这似乎是body上的overflow-x: hidden和体内.content上的postion: absolute的结合。

但是，我不能轻易摆脱职位绝对要求，因为不同的.content容器应该能够相互放置。

编辑 2：它变得更加奇怪：我有一个transform: translate(0,0)设置.content以便以后能够过渡到其他值。如果我删除它，一切正常！另一个看似无关的 css干扰的属性。

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

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

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

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

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

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

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

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

我的事件处理程序如下所示：

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

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

只需使用容器而不是窗口，并从该事件中获取scrollTop。

const container = document.querySelector('.abc');
fromEvent(container,'scroll').pipe(
map ((event) => event.srcElement['scrollTop'])
)

为我工作

相关文章：