How to prevent scroll while pre-loader is loading

You can hide the browser scrollbar when a pre-loader is loading by setting the CSS overflow property to hidden on the html and body elements. But if we set overflow to hidden in html and body, it will prevent scroll inside builder. Here is the easy setup just for one specific page and code example:

Step – 1

Add body class

Step -2

Copy and paste code in custom code area.

CSS:

 .hide-scroll {
  overflow: hidden;
}

When the pre-loader is finished loading, you can remove the overflow: hidden styles from the html and body elements to restore the scrollbar:

Vanilla JS:

<script>
const preloader = document.querySelector('.preloader');

// simulate preloader loading for 3 seconds
setTimeout(() => {
  preloader.remove();
  document.documentElement.style.overflow = 'auto';
  document.body.style.overflow = 'auto';
}, 3000);
</script>

In this example, we use setTimeout() to simulate the pre-loader loading for 3 seconds. When the pre-loader is finished loading, we remove it from the DOM and set the overflow property of both the html and body elements back to auto to restore the scrollbar.