logo标签列表

当使用overflow-x: hidden时，window.pageYOffset始终为0。

javascriptcssscroll
15
我正在创建一个网页，其中有一些只需要在特定时间滑入的屏幕外内容。为了实现这一点，我在`html、body`上设置了`overflow-x: hidden`。这样用户就无法左右滚动以获取内容。
但是，在应用程序的某个时刻，我还需要用户已经滚动下来的量。据我所知，`window.pageYOffset`是其中最可靠的方法之一。
然而，当我设置`overflow-x`规则时，`window.pageYOffset`始终等于`0`。
这两件事情不应该是相互关系不大的吗？我该如何解决这个问题？
我已经在Safari、Firefox和Chrome上进行了测试。
我尝试过使用`document.documentElement.scrollTop`，但这只在Firefox上起作用。
注意：
我无法通过一个非常简单的例子重现这个问题。我的应用程序还将主要内容放在一个具有`position: absolute`的容器中。如果我删除这个，一切都好了。
因此，似乎是在`body`上设置`overflow-x: hidden`和`body`内部的`content`上的`postion: absolute`的组合。
然而，我很难摆脱绝对位置的要求，因为不同的`.content`容器应该能够相互叠加。
编辑2： 变得更加奇怪了：我在`content`上设置了`transform: translate(0,0)`，以便稍后过渡到其他值。如果我删除这个，一切都好了！又一个看起来没有关系的CSS属性干扰了。
我发现我的问题在于我在html和body上都设置了overflow-x: hidden。如果我将其移动到只有html上，那么就没问题了。然而，IE11现在会忽略它，这意味着我必须向内部元素添加额外的overflow-x: hidden。另外，由于添加了flex和sticky footer等内容，导致此错误显现出来。转换和绝对定位可能也会影响它。 - Matt Fletcher
3个回答
11

我曾经遇到过同样的问题，在长时间的搜索后终于解决了。

这个问题似乎来自于body标签内的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;
}

通过这个小技巧，当我扫描现在位于我的包装元素中的scrollTop属性时，结果不再是0而是真实值。 如果没有这个，它在Chrome上不起作用...

11
我有一个类似的问题，其中溢出发生的元素的父级具有overflow: hidden;。这不是我可以随便删除的CSS属性。
我的解决方法是，不是使用window.pageYOffset或document.documentElement.scrollTop，而是在滚动发生时获取Event对象。从Event对象中，我们可以获取scrollTop属性，例如e.srcElement.scrollTop 我的事件处理程序大致如下：
onScroll(e) {
  if (e.srcElement.scrollTop > 8) {
    // do something
  }
}

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

在我的情况下，我使用e.srcElement.scrollingElement.scrollTop，否则我会收到未定义的错误。它在Chrome上工作。 - Ratha Hin
1
事件不会在 overflow-x: hidden 的情况下触发，因此问题与上述相同。 - Matt Fletcher
0

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

const container = document.querySelector('.abc');

fromEvent(container,'scroll').pipe(
map ((event) => event.srcElement['scrollTop'])
)

对我来说没问题

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接