我有一个预加载程序，它将在页面加载时显示。我用 window.addEventListener("load", function() 加载页面后将其隐藏。
我想在页面加载时隐藏滚动条。问题是如果我把代码 overflow: hidden; 在这个函数中，滚动条只有在页面完全加载后才会被隐藏，但我希望它在页面加载之前和加载过程中被隐藏（当预加载程序显示时）。
如果运行下面的脚本，您将看到滚动条被隐藏，因为页面已经加载，因为只有一个 <p> html元素，我使用它来演示，如果页面加载很长，那么您将看到在加载时仍然会显示滚动条。
var loader = document.getElementById("container");
window.addEventListener("load", function() {
document.body.style.overflow = "hidden"
window.setTimeout(() => {
loader.style.display = "none";
document.body.style.overflow = "auto"
}, 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>
3条答案
按热度按时间polhcujo1#
我添加了多个
现在您可以检查溢出将隐藏，直到页面加载
qgelzfjb2#
使用domcontentloaded而不是load
r3i60tvu3#