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:

6 Likes

Nice and simple custom code trick there @PeterDimitrov, 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

Awe geez man thanks a lot. Until I found your post I could only find scripts to disable scroll on click. You’re the man, man!!!

1 Like

Thanks so much for this! One question: does the timer kick in right as the page is loading, or after the page loads? I wonder if there’s a way to start the timer counting after the page is done loading? EDIT: Ah, darn. Just noticed that this doesn’t work in mobile Safari. :pensive:

Will this hold people from scrolling on all pages? Is there a way to set this loading wait time only on the first page?