我有一个预加载器,它会在页面加载时显示,它会在页面加载加一秒后消失。
我想要实现的是,我不希望人们在显示预加载器时能够看到滚动条。我该怎么做?
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>
最佳答案
你可以像下面那样做:
window.addEventListener("load", function() {
document.body.style.overflow = "hidden"
window.setTimeout(() => {
loader.style.display = "none";
document.body.style.overflow = "auto"
}, 1000)
})
关于JavaScript:在页面加载时隐藏滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68540241/