How can I disable page scrolling while the preloader is loading in Webflow?

Published on
September 22, 2023

To disable page scrolling while the preloader is loading in Webflow, you can use custom code. Here's how you can achieve this:

  1. Go to your Webflow project and navigate to the page where you want to disable scrolling during the preloader.
  2. Click on the "Page settings" icon in the left sidebar.
  3. Select the "Custom code" tab.
  4. In the "Head code" section, paste the following code:
<style>  body {    overflow: hidden !important;  }</style>
  1. Click "Save changes" to apply the changes.
  2. This code will add a style tag to the head of your page and set the overflow property of the body element to hidden, preventing scrolling while the preloader is active.
  3. Make sure to remove the code once the preloader is no longer necessary to restore regular page scrolling functionality.

By following these steps, you will be able to disable page scrolling while the preloader is loading in Webflow.

Additional Questions:

  1. How do I add a custom preloader to my Webflow site?
  2. Can I customize the appearance of the preloader in Webflow?
  3. Is it possible to have different preloaders for different pages in Webflow?