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

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

javascript css scroll

Javascript window.pageYOffset始终为0，溢出-x:隐藏,javascript,css,scroll,Javascript,Css,Scroll,我正在创建一个网页，其中包含一些只需要在特定时间滑入的屏幕外内容。为了实现这一点，我在html，body上设置了overflow-x:hidden。这样，用户就无法向左或向右滚动以获取内容然而，在应用程序中的某个时刻，我还需要用户已经向下滚动的数量。据我所知，window.pageYOffset是最可靠的方法之一但是，当我设置溢出-x规则时窗口。页面偏移量始终等于0 这些东西不应该彼此毫无关联吗？我怎样才能解决这个问题我已经在Safari、Firefox和Chrome上测试过了我试过do

我正在创建一个网页，其中包含一些只需要在特定时间滑入的屏幕外内容。为了实现这一点，我在

html，body

上设置了

overflow-x:hidden

。这样，用户就无法向左或向右滚动以获取内容

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

但是，当我设置

溢出-x

规则时<代码>窗口。页面偏移量始终等于

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

我已经在Safari、Firefox和Chrome上测试过了

我试过

document.documentElement.scrollTop

，但这只在Firefox上有效

注意：

我无法用一个非常简单的例子再现这个问题。我的应用程序的主内容也位于一个容器中，该容器具有

位置：absolute

。如果我去掉这个，一切都会正常

因此，它似乎是

body

上的

overflow-x:hidden

和

.content

上的

position:absolute

的组合

然而，我不能轻易摆脱职位的绝对要求，因为不同的

.content

容器应该能够彼此重叠放置

编辑2：更奇怪的是：我在

.content上设置了转换：translate（0,0），以便以后能够转换到其他值。如果我去掉这个，一切正常！另一个看似无关的css
属性进行干扰。
我遇到了完全相同的问题，经过长时间搜索后解决了这个问题
问题似乎来自overflow-x:hidden
体内。因此，为了修复这种奇怪的行为，我使用了如下包装：
<body>
   <div class="myWrapper">
      All your content here
   </div>
</body>

使用这个小技巧，当我扫描现在位于包装器元素中的srollTop属性时，结果不再是0，而是实际值。
如果没有这一点，它就不能在Chrome上工作…
我有一个类似的问题，溢出发生的元素的父元素有溢出：隐藏。这不是一个CSS属性，我可以删除
我的解决方案是，在滚动发生时，我不获取窗口.pageYOffset
或文档.documentElement.scrollTop
，而是获取事件
对象。从事件
对象中，我们可以获得scrollTop
属性，如e.srceelement.scrollTop

我的事件处理程序类似于：
onScroll(e) {
  if (e.srcElement.scrollTop > 8) {
    // do something
  }
}

然后，将此事件绑定到发生滚动的元素。
在我的例子中，我使用e.srcelment.scrollingElement.scrollTop，否则我将收到未定义的消息。它在Chrome上工作。事件不会与overflow-x:hidden
一起触发，因此问题与上面相同。我发现我的问题是html和正文上都有overflow-x:hidden
。如果我把它移到html，就可以了。然而，IE11现在会忽略它，这意味着我必须向一个内部元素添加一个额外的overflow-x:hidden。另一个注意事项是，这是由于添加了flex和sticky footer内容，导致了这个bug的出现。翻译和位置绝对可能也会影响它。
onScroll(e) {
  if (e.srcElement.scrollTop > 8) {
    // do something
  }
}