There are multiple ways to prevent scrolling while the page is loading with a loader, but a common approach is:
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.
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.
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.
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');
});
Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss
Asked: 2023-05-20 10:14:43 +0000
Seen: 13 times
Last updated: May 20 '23
What steps can I take to prevent my webpage from slowing down when all parts of a div are displayed?
What is the method to include a loading spinner when a button is clicked?
How can Recursive Quote Embedding for HTML and Javascript be made more advanced?
When printing from WKWebView in Swift, the background is not taken into account.
Is it feasible to utilize a Toggle Button to switch among multiple classes exceeding 2?
What is the process for generating a dynamic subdomain/URL using vue.js?
How can I create a transition on click using CSS without the need for JavaScript?