I have a very special loading animation where some overlays have to align pixel perfectly onto each other for a seamless transition. When the screen is loading and you scroll, it won’t align any more. So I wanna shut down scrolling during this time. To Hide/Show a .content-wrapper Div won’t work in this case unfortunately.
I don’t fully understand what you’re trying to achieve here but what if you wrap all the content of your page in a div and set that div to not show until your loading animation finishes? Just trying to come up with ideas with the information I have, maybe sharing an example or what you have so far could help.
First, you were right about scrolling not working with the body’s tag set to overflow none. I was unaware the site needed to be published. So I was right about me missing something.
Three years later, I’m trying to accomplish the same thing that @wedo was trying to accomplish. My Navbar has an intro animation, and if the user scrolls the page, it messes up the whole effect.
I want to set the body’s tag to Overflow: none but only for about 3 seconds.
I’m not a coder but I did some research and this code could help:
// Get the body element
var body = document.getElementsByTagName("body")[0];
// Apply overflow: hidden to the body
body.style.overflow = "hidden";
// Set a timeout to remove the overflow: hidden style after 3 seconds
setTimeout(function() {
body.style.overflow = "";
}, 3000);
This will make sure that the code only fires when all page resources (including interactions) are loaded, which can be influenced by different connection speeds.
“The power of teamwork overcomes all! The Power Is On! Each has a power. Each has a purpose, and together they will face their greatest adventure.” ~ Power Rangers