我正在创建一个网页,其中有一些只需要在特定时间滑入的屏幕外内容。为了实现这一点,我在`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属性干扰了。
但是,在应用程序的某个时刻,我还需要用户已经滚动下来的量。据我所知,`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属性干扰了。
overflow-x: hidden
。如果我将其移动到只有html上,那么就没问题了。然而,IE11现在会忽略它,这意味着我必须向内部元素添加额外的overflow-x: hidden
。另外,由于添加了flex和sticky footer等内容,导致此错误显现出来。转换和绝对定位可能也会影响它。 - Matt Fletcher