javascript - 使用 'overflow: hidden' (CSS) 和 jQuery 阻止用户滚动加载页面

Question

目标

我想阻止用户在页面加载时滚动。

问题

下面的代码确实有效，并且它确实阻止用户在使用时滚动:

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

.hidden {
    overflow: hidden !important;
}

然而，它似乎只是阻止用户在加载器动画的额外 2 秒内滚动。

尝试

我基本上从这个问题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');
  });
}

摘要

我想阻止用户在整个加载过程中滚动页面，即在页面加载时以及加载动画的额外两秒内。

更新

要更清楚地了解效果，请参阅下面的代码片段:

  $('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="">

Answer 1

如果您坚持使用此方法:

$(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>