Question

我想知道在蓝色div（id =＆＃34; load＆＃34;）显示时（2秒）是否可以删除/隐藏滚动。如果答案是肯定的，我该如何做到？

我曾尝试使用overflow-x：隐藏在蓝色div（加载）中，但它无法正常工作。

我之所以需要这样做，是因为我在这个蓝色的div后面有完整的网站，我不希望人们在加载屏幕（蓝色div）显示时向下滚动，因为它们会出现在当加载屏幕消失时（2秒后）网站的midel。

＆＃13;

document.onreadystatechange = function() {
  var state = document.readyState
  if (state == 'complete') {
    setTimeout(function() {
      document.getElementById('interactive');
      document.getElementById('load').style.visibility = "hidden";
    }, 2500);
  }
}

＆＃13;

#load {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 2000;
  background-color: #29d4e6;
  top: 0;
  -webkit-animation-delay: 2.3s;
  -moz-animation-delay: 2.3s;
  -o-animation-delay: 2.3s;
  animation-delay: 2.3s;
}

＆＃13;

<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
</head>

<body>
  <div class="animated fadeOut" id="load">Loading........</div>
  <div style="height:2000px"> Hello there! full website </div>
</body>

</html>

＆＃13;

Answer 1

您应该在蓝色div显示时隐藏您的网站内容

＆＃13;

document.onreadystatechange = function() {
  var state = document.readyState
  if (state == 'complete') {
    setTimeout(function() {
      document.getElementById('interactive');
      document.getElementById('load').style.visibility = "hidden";
      document.getElementById('content').className = '';
    }, 2500);
  }
}

＆＃13;

#load {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 2000;
  background-color: #29d4e6;
  top: 0;
  -webkit-animation-delay: 2.3s;
  -moz-animation-delay: 2.3s;
  -o-animation-delay: 2.3s;
  animation-delay: 2.3s;
}
.hidden {
  display: none;
}

＆＃13;

<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
</head>

<body>
  <div class="animated fadeOut" id="load">Loading........</div>
  <div style="height:2000px" id="content" class="hidden"> Hello there! full website </div>
</body>

</html>

＆＃13;

Answer 2

您可以使用以下内容。

隐藏与overflow标记onload相关的<body>属性，并在页面渲染后重新启用它。

document.onreadystatechange = function() {
  var state = document.readyState
  if (state == 'complete') {
    setTimeout(function() {
      document.getElementById('interactive');
      document.getElementById('load').style.visibility = "hidden";
      document.getElementsByTagName("BODY")[0].style.overflow = "auto";
    }, 2500);
  } else {
    document.getElementsByTagName("BODY")[0].style.overflow = "hidden";
  }
}

#load {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 2000;
  background-color: #29d4e6;
  top: 0;
  -webkit-animation-delay: 2.3s;
  -moz-animation-delay: 2.3s;
  -o-animation-delay: 2.3s;
  animation-delay: 2.3s;
}

<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
</head>

<body>
  <div class="animated fadeOut" id="load">Loading........</div>
  <div style="height:2000px"> Hello there! full website </div>
</body>

</html>

<强>更新或者你可以为主要内容定义一个CSS类/ ID，并将其隐藏起来直到页面加载。

例如：

<div id="content" style="height:2000px"> Hello there! full website </div>

document.onreadystatechange = function() {
  var state = document.readyState
  if (state == 'complete') {
    setTimeout(function() {
      document.getElementById('interactive');
      document.getElementById('load').style.visibility = "hidden";
      document.getElementById('content').style.visibility = "visible";
    }, 2500);
  } else {
    document.getElementById('content').style.visibility = "hidden";
  }
}

Answer 3

通过使用两个@keyframe动画，您可以通过CSS单独实现此效果。

工作示例：

body {
position: relative;
height: 400vh;
margin: 0;
padding: 6px;
animation: noScrollBar 3s linear;
}

.loading {
position: absolute;
display: block;
top: 0;
left: 0;
z-index: 12;
width: 0;
height: 0;
padding: 6px;
background-color: #29d4e6;
opacity: 0;
pointer-events: none;
animation: loading 3s linear;
}

.loading::before {
content: 'Loading...';
}

@keyframes noScrollBar {
  0% {position: fixed;}
100% {position: fixed;}
}

@keyframes loading {
  0% {width: 100vw; height: 100vh; opacity: 1;}
100% {width: 100vw; height: 100vh; opacity: 1;}
}

<p>Hello there! full website</p>
<div class="loading"></div>

Answer 4

您可以使用此

脚本

document.onreadystatechange = function() {
  var state = document.readyState
  if (state == 'complete') {
    setTimeout(function() {
    document.getElementById('interactive');
    document.getElementById('load').style.visibility = "hidden";
    document.getElementById('inner-content').style.height = '2000px';

    }, 2500);
  }
}

CSS

#load {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 2000;
  background-color: #29d4e6;
  top: 0;
  -webkit-animation-delay: 2.3s;
  -moz-animation-delay: 2.3s;
  -o-animation-delay: 2.3s;
  animation-delay: 2.3s;
}

HTML

<div class="animated fadeOut" id="load">Loading........</div>
<div style="" id="inner-content"> Hello there! full website </div>

如何隐藏/删除div中的滚动条？

4 个答案: