When page finishes loading -> Set overflow to visible after delay

Hi all,

I´m looking for a custom code snippet which achieves following:

When Webflow starts the animation at “When page finishes loading” set .body {overflow: visible}; after a delay of 1 second.

I really hope some code ninja can help me out here …
Cheers!

Wouldn’t a div showing/hiding with interactions do the same? Just wondering the use case here.

Hi @aaronocampo

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.

I´m not allowed to share a public link, sorry… :face_with_head_bandage:
To Hide/Show a .content-wrapper-div won’t work in this case unfortunately to shut down scrolling.

The script should do following:

  1. Wait until my animation gets fired which lies at webflows “When page finishes loading”.
  2. Wait 1 second until animation has finished.
  3. Set .body overflow to visible.

Or in other words: wait until my animation from “When page finishes loading” has finished and then set .body overflow to visible.

:slightly_smiling_face:

Hello Again,

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. :shushing_face:

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.

Any help again is appreciated.

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);
1 Like

Yooo. Thank you. That worked and so simple too. I tried a couple of solutions that did not work.

I’m now trying to decide whether I will implement this due to a possible bad UX. We will see. Thanks again!

@dannyFig

Building on @aaronocampo 's answer, you might want to rely on the window load event :arrow_upper_right: as follows:

<script>
  const body = document.querySelector('body');
  body.style.overflow = 'hidden';

  window.addEventListener('load', (event) => {
     setTimeout(() => body.style.overflow = "", 1000);
  });
</script>

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.

2 Likes

“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

1 Like