javascript jquery overflow document-body

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

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('<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(); //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('<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(); //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;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>My Custom Loader</h2>
  <img src="https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687" alt="">
  <img src="https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
  <img src="https://image.shutterstock.com/image-photo/micro-peacock-feather-hd-imagebest-260nw-1127238584.jpg" alt="">
  <img src="https://media3.s-nbcnews.com/j/newscms/2019_41/3047866/191010-japan-stalker-mc-1121_06b4c20bbf96a51dc8663f334404a899.fit-760w.JPG" alt="">
  <img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/fall-1072821__340.jpg" alt="">

Solution

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%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <h1>Body</h1>
</body>
</html>