0

I am trying to build a preloader DIV that covers the page until the page is loaded. However, I cannot manage to disable page scrolling when the preloader DIV is visible:

$('body').css('overflow-y','hidden');
$('body').css('position','fixed');

$(window).on("load", function() {
  $('#preloader').delay(2000).fadeOut('slow');
  $('body').css('overflow-y','auto');
  $('body').css('position','relative');
})
rainerbrunotte
  • 907
  • 1
  • 17
  • 37
  • This link can help you as a similar question is asked there. https://stackoverflow.com/questions/3656592/how-to-programmatically-disable-page-scrolling-with-jquery – Umer Hayyat Dec 14 '18 at 11:10
  • try it for both `html` and `body` and yes look at the question that @UmerHayyat mentioned. and this [answer](https://stackoverflow.com/a/17293689/8493822) – RajnishCoder Dec 14 '18 at 11:17

1 Answers1

-1

From my understanding, you need a loader to appear on the page until the corresponding page is completely loaded.

For this here is the solution: Add the following HTML after the opening tag. This loader div will show a loading image on page load.

<div class="loader"></div>

Use the following CSS to display a loading image on loader div, make loading image position center of the page, and cover the entire screen with a transparent white background.

.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('images/pageLoader.gif') 50% 50% no-repeat rgb(249,249,249);
opacity: .8;
}

At first include the jQuery library.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script type="text/javascript">
$(window).load(function() {$(".loader").fadeOut("slow");});
</script>

Also, ensure that the entire JavaScript code has been placed under the tag.

Pranay Patodi
  • 31
  • 2
  • How would this disable page scrolling? – Turnip Dec 14 '18 at 11:43
  • Preventing overflow on the entire assures scrolling on elements other than the desired fixed or absolute element wont happen. It's an easy way to freeze the page body.noScroll { /* ...or body.dialogShowing */ overflow: hidden; } you can add this class until loading is finished and than remomve it – Pranay Patodi Dec 17 '18 at 07:23