javascript:页面加载时隐藏滚动条

klr1opcd  于 2021-09-29  发布在  Java
关注(0)|答案(2)|浏览(272)

我有一个预加载程序,它会显示当网页加载,它会消失后,网页加载加上一秒钟。
我想实现的是,我不希望人们在预装程序显示时能够看到滚动条。我该怎么做?

var loader = document.getElementById("container");
window.addEventListener("load", function() {
  window.setTimeout(() => {
    loader.style.display = "none";
  }, 1000)
})

# container {

  background-color: #ddd;
  height: 100vh;
}

P {
  height: 100vh;
  overflow: visible;
}

.loader1{
    position: relative;
    height: 80px;
    width: 80px;
    border-radius: 80px;
    border: 3px solid  rgba(255,255,255, .7);
    top: 28%;
    top: calc(50% - 43px);
    left: 35%;
    left: calc(50% - 43px);
    -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;
    -webkit-animation: loader1 3s linear infinite; animation: loader1 3s linear infinite;
}

.loader1:after{
    content: "";
    position: absolute;
    top: -5px;
    left: 20px;
    width: 11px;
    height: 11px;
    border-radius: 10px;
    background-color: #fff;
}

@-webkit-keyframes loader1{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);}
}

@keyframes loader1{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}
<div id="container">
  <div class="loader1"></div>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
m1m5dgzv

m1m5dgzv1#

您可以按如下方式进行操作:

window.addEventListener("load", function() {
  document.body.style.overflow = "hidden"
  window.setTimeout(() => {
    loader.style.display = "none";
    document.body.style.overflow = "auto"
  }, 1000)
})
ttvkxqim

ttvkxqim2#

您可以添加代码

loader.style.display = "none";
    document.body.style.overflow = "auto"

在函数settimeout()中

相关问题