gpt4 book ai didi

javascript - window.pageYOffset 始终为 0,溢出 x : hidden

转载 作者:数据小太阳 更新时间:2023-10-29 04:42:17 25 4
gpt4 key购买 nike

我正在创建一个网页,其中包含一些只需要在特定时间滑入的屏幕外内容。为此,我在 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干扰的属性(property)。

最佳答案

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

问题似乎出在正文中的overflow-x: hidden。所以为了解决这个奇怪的行为,我使用了这样的包装器:

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

然后我在包装器的 CSS 中移动了 overflow 属性,而不是让它在 html 中,正文:

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

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

关于javascript - window.pageYOffset 始终为 0,溢出 x : hidden,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28050548/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com