问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

window.pageYOffset 总是 0 with overflow-x: hidden

社区维基
1
新手上路，请多包涵

我正在创建一个网页，其中包含一些只需要在特定时间滑入的屏幕外内容。为此，我将 overflow-x: hidden 设置为 html, body 。这样用户就无法向左或向右滚动以获取内容。

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

但是，当我设置 overflow-x 规则时。 window.pageYOffset 总是等于 0 。

这些事情不应该彼此无关吗？我怎样才能解决这个问题？

我已经在 Safari、Firefox 和 Chrome 上对此进行了测试。

我试过 document.documentElement.scrollTop 但这只适用于 Firefox。

注意：

我无法通过一个非常简单的示例重现该问题。我的应用程序还在具有 position: absolute 的容器中包含主要内容。如果我删除它，一切正常。

因此，似乎是 overflow-x: hidden postion: absolute body .content

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

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

原文由 romeovs 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptcssscroll
阅读 833
1 个回答
得票最新
社区维基
1

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

问题似乎来自体内的 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;
}

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

原文由 Solofeed 发布，翻译遵循 CC BY-SA 3.0 许可协议

查看全部 1 个回答
推荐问题