window.pageYOffset始终为0，其中overflow-x：hidden [英] window.pageYOffset is always 0 with overflow-x: hidden
问题描述
我正在创建一个网页，其中包含一些只需要在特定时间滑入的屏幕外内容。为实现这一点，我在 html，body 上设置 overflow-x：hidden 。这样，用户无法向左或向右滚动以获取内容。
但是，在应用程序的某个时刻，我还需要用户已向下滚动的金额。据我所知 window.pageYOffset 是最可靠的方法之一。
然而，当我设置了 overflow-x 规则。 window.pageYOffset 始终等于 0 。
难道这些东西不应该彼此无关吗？我怎样才能解决这个问题？
我在Safari，Firefox和Chrome上测试了这个。
我试过 document.documentElement.scrollTop 但这仅适用于Firefox。
NB：
我无法用一个非常简单的例子重现问题。
我的应用程序还包含一个容器中的主要内容，该容器具有 position：absolute 。如果我删除它，一切正常。
所以它似乎是 overflow-x：hidden 的组合 body 和 postion：绝对在 .content 里面正如。
不同 .content 我不能轻易摆脱绝对要求的位置。容器应该可以放在一起。
编辑2：
它变得更奇怪：我有一个转换：translate（0,0）在 .content 上设置，以便稍后可以转换为其他值。如果我删除它，一切正常！另一个看似无关的css
属性会干扰。
我遇到了完全相同的问题，我在解决了长搜索。
问题似乎来自身体内的 overflow-x：hidden 。所以为了解决这个奇怪的行为，我使用了这样的包装：
< body>
< div class =myWrapper>
此处所有内容
< / div>
< / body>
然后我在包装器的CSS中移动了溢出属性，而不是让它在html中，body：
html，body {
margin：0;
填充：0;
身高：100％;
}
.wrapper {
身高：100％;
overflow-x：hidden;
}
当我扫描现在位于我的包装元素中的srollTop属性时，这个小技巧，结果不再是0而是真正的价值。
如果没有它，它在Chrome上无效...
I'm creating a webpage that has some off-screen content that only needs to slide in at specific times. To achieve this I'm setting overflow-x: hidden on html, body. This way the user cannot scroll left or right to get at the content.
However, at some point in the application I also need the amount that the user has scrolled down yet. As far as I know window.pageYOffset is one of the most reliable ways of doing this.
However, when I set the overflow-x rule. window.pageYOffset is always equal to 0.
Shouldn't these things be pretty unrelated to each other? How can I fix this?
I've tested this on Safari, Firefox and Chrome.
I've tried document.documentElement.scrollTop but this only worked on Firefox.
NB:
I was not able to reproduce the problem with a very simple example.
My app also has the main content in a container that has position: absolute. If I remove this, everything works.
So it seems to be the combination of overflow-x: hidden on body and postion: absolute on the .content inside the body.
I cannot easily get rid of the position absolute requirement however, since
different .content containers should be able to be placed over one another.
Edit 2:
It gets even weirder: I've got a transform: translate(0,0) set on .content to be be able to transition to some other value later. If I remove this, everything works fine! Yet another seemingly unrelated css
property that interferes.
I had the exact same problem and i resolved it after a long search.
The problem seems to comes from overflow-x: hidden inside the body. So to fix this strange behavior i used a wrapper like this :
<body>
<div class="myWrapper">
All your content here
</div>
</body>
and then I moved the overflow attribute in the wrapper's CSS instead of letting it in html, body :
html, body {
margin:0;
padding:0;
height: 100%;
}
.wrapper {
height: 100%;
overflow-x: hidden;
}
With this little trick when i scan my srollTop propertie now located in my wrapper element, the result is no longer 0 but the real value. Without that it doesn't work on Chrome ...
这篇关于window.pageYOffset始终为0，其中overflow-x：hidden的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
