预加载网页时禁用滚动答案

【问题标题】：Disable scrolling when preload a web page预加载网页时禁用滚动
【发布时间】：2016-05-23 07:20:16
【问题描述】：

这是我的预加载脚本

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

所以我想在“加载”仍然存在时禁用滚动，在它完成淡出后再次启用它。

【问题讨论】：

标签： javascript jquery html scroll preloader

【解决方案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】：

您可以按如下方式隐藏和显示滚动条

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

【讨论】：