Disable scrolling when preload a web page

问题

this is my preloader script

$(window).load(function() {
 $("#loading").fadeOut(1000);

So i would like to disable scrolling when the "loading" still there, after it finished fading out enabling it again.

回答1:

$(window).load(function() {
  $(".preloader").fadeOut(1000, function() {
      $('body').removeClass('loading');
  });
});

.loading {
  overflow: hidden;
  height: 100vh;
}

.preloader {
  background: #fff;
  position: fixed;
  text-align: center;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

.preloader4 {
   position: absolute;
   margin: -17px 0 0 -17px;
   left: 50%;
   top: 50%;
   width:35px;
   height:35px;
   padding: 0px;
   border-radius:100%;
   border:2px solid;
   border-top-color:rgba(0,0,0, 0.65);
   border-bottom-color:rgba(0,0,0, 0.15);
   border-left-color:rgba(0,0,0, 0.65);
   border-right-color:rgba(0,0,0, 0.15);
   -webkit-animation: preloader4 0.8s linear infinite;
   animation: preloader4 0.8s linear infinite;
}
@keyframes preloader4 {
   from {transform: rotate(0deg);}
   to {transform: rotate(360deg);}
}
@-webkit-keyframes preloader4 {
   from {-webkit-transform: rotate(0deg);}
   to {-webkit-transform: rotate(360deg);}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body class="loading">
  <div class="preloader">
    <div class="preloader4"></div>
  </div>
  <p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet,  Lorem ipsum dolor sit amet.</p>
</body>

回答2:

you can hide and show the scrollbar as follows

$(window).load(function() {
$(window).css("overflow","hidden");
 $("#loading").fadeOut(1000,function(){ $(window).css("overflow","auto")} );

来源：https://stackoverflow.com/questions/37384844/disable-scrolling-when-preload-a-web-page

标签

javascript

jquery

html

scroll

preloader