Using 'overflow: hidden' (CSS) and jQuery to prevent user from scrolling though a loading page

Question

AIM

I would like to prevent the user from scrolling while the page is loading.

PROBLEM

The code below does work, and it does prevent the user from scrolling when using:

$('body').toggleClass('hidden');

.hidden {
    overflow: hidden !important;
}

HOWEVER, it only seems to prevent the user from scrolling during the extra 2 seconds of the loader animation.

ATTEMPT

I essentially took the code from this question How to show Page Loading div until the page has finished loading.

$('body').append('');

$(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(); //makes page more lightweight
    $('body').toggleClass('hidden');
  });
}

SUMMARY

I would like to prevent the user from scrolling the page during the whole process of loading, i.e. while the page is loading AND for the extra two seconds of the loading animation.

UPDATE

For a clearer picture of the effect see the snippet below:

  $('body').append('');

  $(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(); //makes page more lightweight
      $('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;
    }

    .loader {
      color: red;
      font-size: 10px;
      margin: 80px auto;
      position: relative;
      text-indent: -9999em;
      -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }

    .loader:before,
    .loader:after {
      content: '';
      position: absolute;
      top: 0;
    }

    .loader:before {
      left: -3.5em;
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }

    .loader:after {
      left: 3.5em;
    }

    @-webkit-keyframes load7 {

      0%,
      80%,
      100% {
        box-shadow: 0 2.5em 0 -1.3em;
      }

      40% {
        box-shadow: 0 2.5em 0 0;
      }
    }

    @keyframes load7 {

      0%,
      80%,
      100% {
        box-shadow: 0 2.5em 0 -1.3em;
      }

      40% {
        box-shadow: 0 2.5em 0 0;
      }
    }

    #loadingDiv {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #000;

      display: -webkit-flexbox;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      justify-content: center;
    }


My Custom Loader

Ahed Kabalan · Accepted Answer

If you are insistent use this approach:

$(document).ready(function(){

    $('body').addClass('loader');
    
    $(window).on('load', function() {
      setTimeout(function(){$('body').removeClass('loader');}, 2000);

    });
    
});

body{
    width: 100%;height: 500px;background: red;overflow: auto;
}
.loader{
    overflow: hidden !important;width: 100%;height: 100%;
}







    Body

Using 'overflow: hidden' (CSS) and jQuery to prevent user from scrolling though a loading page

Answers (2)

Related Questions

Using &#39;overflow: hidden&#39; (CSS) and jQuery to prevent user from scrolling though a loading page

Answers (2)

Related Questions

Using 'overflow: hidden' (CSS) and jQuery to prevent user from scrolling though a loading page