All geek questions in one place

Window.pageYOffset is always 0 with overflow-x: hidden

I am creating a web page on which there is some screen content that you only need to insert at a specific time. To do this, I set overflow-x: hidden to html, body . Thus, the user cannot scroll left or right to get the contents.

However, at some point in the application, I also need the amount that the user scrolls down. As far as I know, window.pageYOffset is one of the most reliable ways to do this.

However, when I set the overflow-x rule. window.pageYOffset always 0 .

Shouldn't these things be completely unrelated to each other? How can i fix this?

I tested this in Safari, Firefox and Chrome.

I tried document.documentElement.scrollTop , but this only worked on Firefox.

Note:

I could not reproduce the problem with a very simple example. My application also has the main content in the container with position: absolute . If I remove this, everything will work.

Thus, it looks like a combination of overflow-x: hidden on the body and postion: absolute on .content inside the body.

I cannot easily get rid of the absolute requirement of a position, since the various .content containers must be located one above the other.

Edit 2: It gets even weirder: I have transform: translate(0,0) set to .content in order to be able to switch to another value later. If I remove it, everything will be fine! Another seemingly unrelated css property that interferes.

+6
source share
1 answer

I had the same problem and resolved it after a long search.

The problem seems to come from overflow-x: hidden inside the body. To fix this strange behavior, I used a wrapper as follows:

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

and then I moved the overflow attribute to the CSS wrapper instead of allowing 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 property, which is now in my shell element, the result is no longer 0, but a real value. Without it, it does not work in Chrome ...

+5
source

Source: https://habr.com/ru/post/981295/

More articles:


All Articles