Menu
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.
968
According to MDN, the pageXoffset and pageYoffset is not deprecated.
The read-only Window property pageYOffset is an alias for scrollY ; as such, it returns the number of pixels the document is currently scrolled along the vertical axis (that is, up or down) with a value of 0.0, indicating that the top edge of the Document is currently aligned with the top edge of the window's content ...
Definition and Usage. The pageXOffset property returns the pixels a document has scrolled from the upper left corner of the window. The pageXOffset property is equal to the scrollX property. The pageXOffset property is read-only.
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 ...
91
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
