Streaming live at 10am (PST)

Lock body scroll for X amount of time

Hey community!

I was searching for a solution to lock the page scroll for x amount of time so people can see the page load animation and scroll when the animation is done.

This can be useful to others so I’m sharing the code here.

Steps:

  1. Add a class to the body > .no-scroll (you can use whatever you want)

  2. Set to overflow hidden

  3. Add the code bellow to the before body tag

  4. change 4000 to the time you want

     <script>
      setTimeout(()=> document.body.classList.remove('your-class') ,4000);
     </script>
    

Piter :webflow_heart:

3 Likes

Nice and simple custom code trick there @PiterDimitrov, thanks for sharing that :slight_smile:

The no code alternative might be to setup an animation to run when page first loads and runs until page load complete with a delay added to the page load interaction.

Might be able to be incorporated using the Preloader instruction :slight_smile:

I like your code also, because it helps to lock the body scroll :slight_smile: this could also be useful in some custom mobile menu situations :slight_smile:

1 Like

Thanks @cyberdave

For some sites I’m using the load interactions, but I was having problems with the last project I’m working on so I needed something like this :smiley:

1 Like