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

I wonder if it is possible to remove/hide the scroll while the blue div (id="load") is showing (2 seconds). If the answer is yes, how can I make that?

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

I have tried to use overflow-x:hidden in the blue div (load) and it doesn't work.

我试图使用overflow-x：隐藏在蓝色div（加载）中，它不起作用。

The reason why I need to make that is because I have behind this blue div the full website and I don't want people scroll down while the loading screen (blue div) is showing, because they will appear in the midel of the website when the loading screen disappear (after 2 seconds).

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

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

#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>

4 个解决方案

#1

You should hide your website content while your blue div is showing

您应该在显示蓝色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').className = '';
    }, 2500);
  }
}

#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;
}

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

#2

You can use as following.

您可以使用如下。

Hide the overflow property relates to <body> tag onload and re-enable it after page render.

隐藏溢出属性与标签onload相关，并在页面渲染后重新启用它。

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>

Update: or else you could define a CSS Class/ID for the main content and hide it till page loads.

更新：或者您可以为主要内容定义CSS类/ ID并隐藏它直到页面加载。

ex:

例如：

<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";
  }
}

#3

You can achieve this effect through CSS alone, by using two @keyframe animations.

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

Working example:

工作范例：

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>

#4

You can use this

你可以用它

Script

脚本

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>

#1