OBJECTIVE
I aim to restrict the user from scrolling while the page is loading.
ISSUE
The snippet of code provided successfully prevents the user from scrolling during the additional 2 seconds of the loader animation:
$('body').toggleClass('hidden');
.hidden {
overflow: hidden !important;
}
However, it only functions to prevent scrolling for the duration of the loader animation.
EFFORTS MADE
The approach taken was inspired by this specific query on Stack Overflow (How to show Page Loading div until the page has finished loading).
$('body').append('<div style="" id="loadingDiv"><div class="loader"></div></div>');
$(window).on('load', function() {
$( "#loadingDiv" ).show();
setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
$('body').toggleClass('hidden');
});
function removeLoader() {
$("#loadingDiv").fadeOut(1500, function() {
// fadeOut complete. Remove the loading div
$("#loadingDiv").hide();
$('body').toggleClass('hidden');
});
}
SUMMARY
The main goal is to prohibit the user from scrolling throughout the entire loading process - both while the page loads and for the additional two seconds of the loading animation.
UPDATE
Refer to the following snippet for a clearer demonstration of the effect:
$('body').append('<div style="" id="loadingDiv"><div class="loader"></div></div>');
$(window).on('load', function() {
$( "#loadingDiv" ).show();
setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
$('body').toggleClass('hidden');
});
function removeLoader() {
$("#loadingDiv").fadeOut(1500, function() {
// fadeOut complete. Remove the loading div
$("#loadingDiv").hide();
$('body').toggleClass('hidden');
});
}.hidden {
overflow: hidden;
}
.loader,
.loader:before,
.loader:after {
border-radius: 50%;
width: 1.5em;
height: 1.5em;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: load7 1.8s infinite ease-in-out;
animation: load7 1.8s infinite ease-in-out;
}
/* Additional CSS properties */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>My Custom Loader</h2>
<img src="#" alt="">
<img src="#" alt="">
<img src="#" alt="">
<img src="#" alt="">
<img src="#" alt="">