Question

我的网站在后台加载时正在使用加载叠加层。但是，滚动条仍然显示，这意味着访问者可以去任何地方，如果网站完成加载，访问者将无法从顶部看到该网站。所以，我想隐藏它，不允许访问者滚动。

这是我的代码：

CSS：

~/.pysnmp/mibs

HTML / jQuery的：

#load {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 5000;
  top: 0;
  left: 0;
  float: left;
  text-align: center;
  padding-top: 25%;
}

<html> <head></head> <body> <div id="load"> Loading... </div> <script> jQuery(window).load(function(){ jQuery('#load').fadeOut(); }); </script> <div class= ... </body> </html>表示网站真实内容的开头。

Answer 1

您可以使用解决方案https://jsfiddle.net/rfaa3hcr/

＆＃13;

$('body').css({
  overflow: 'hidden'
});
setTimeout(function(){
  $('#load').fadeOut('slow', function(){
    $('body').css({
      overflow: 'auto'
    });
  });
}, 5000);

＆＃13;

#load {
  position: fixed;
  height: 100vh;
  overflow: hidden;
  width: 100%;
  z-index: 5000;
  top: 0;
  left: 0;
  text-align: center;
  background: green;
  color: #fff;
  padding-top:25%;
}

body{
  height: 1000px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="load">
    Loading...
</div>

＆＃13;

CSS 更改：   height: 100vh代替100%并添加了overflow: hidden;   身体用1000px来展示你的问题。

JavaScript 更改：   最初overflow:hidden使用jQuery设置为正文。使用setTimeout来展示已解决的问题＆amp;然后在 5秒 fadeout之后加载＆amp;将overflow显示为auto。

希望这会对你有所帮助。

使用加载覆盖时隐藏内容/滚动条？

1 个答案: