Revision history [back]

There are multiple ways to prevent scrolling while the page is loading with a loader, but a common approach is:

1. Add a CSS class to the body or main container of the page that sets the overflow property to hidden. This will prevent the user from scrolling the page content.

2. Create and show the loader element using JavaScript or CSS. The loader can be a GIF or SVG animation, a progress bar, or any other visual cue that indicates the page is still loading.

3. Use a DOM event handler to listen for the "load" event of the page or the specific content that needs to be loaded. When the event fires, hide the loader element and remove the CSS class that prevents scrolling.

4. Optionally, handle error cases and timeouts by hiding the loader and showing an error message or retry button to the user.

Here is an example of the CSS class and JavaScript code:

CSS:

.body-no-scroll {
  overflow: hidden;
}

JavaScript:

document.body.classList.add('body-no-scroll');
showLoader();

window.addEventListener('load', function() {
  hideLoader();
  document.body.classList.remove('body-no-scroll');
});