window.pageYOffset 始终为 0，溢出-x：隐藏答案

【问题标题】：window.pageYOffset is always 0 with overflow-x: hiddenwindow.pageYOffset 始终为 0，溢出-x：隐藏
【发布时间】：2015-03-18 23:43:23
【问题描述】：

我正在创建一个网页，其中包含一些只需要在特定时间滑入的屏幕外内容。为了实现这一点，我在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 和.content 上postion: absolute 的组合。

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

编辑 2：更奇怪的是：我在.content 上设置了一个transform: translate(0,0)，以便以后能够转换为其他值。如果我删除它，一切正常！另一个看似无关的 css 干扰的财产。

【问题讨论】：

我发现我的问题是我在 html 和 body 上都有overflow-x: hidden。如果我将它移到只是 html，那很好。但是，IE11 现在会忽略它，这意味着我必须向内部元素添加额外的 overflow-x: hidden。另外需要注意的是，这是由于添加了 flex 和sticky footer 的东西导致了这个错误的表现。翻译和绝对位置可能也会影响它。

标签： javascript css scroll

【解决方案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 上不起作用......

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：

在我的情况下，我使用 e.srcElement.scrollingElement.scrollTop 否则我收到未定义的。它适用于 Chrome。
overflow-x: hidden 不会触发该事件，因此问题与上述相同。

【解决方案3】：

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

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

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

为我工作

【讨论】：