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

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

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

  1. var loader = document.getElementById("container");
  2. window.addEventListener("load", function() {
  3. window.setTimeout(() => {
  4. loader.style.display = "none";
  5. }, 1000)
  6. })
  1. # container {
  2. background-color: #ddd;
  3. height: 100vh;
  4. }
  5. P {
  6. height: 100vh;
  7. overflow: visible;
  8. }
  9. .loader1{
  10. position: relative;
  11. height: 80px;
  12. width: 80px;
  13. border-radius: 80px;
  14. border: 3px solid rgba(255,255,255, .7);
  15. top: 28%;
  16. top: calc(50% - 43px);
  17. left: 35%;
  18. left: calc(50% - 43px);
  19. -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;
  20. -webkit-animation: loader1 3s linear infinite; animation: loader1 3s linear infinite;
  21. }
  22. .loader1:after{
  23. content: "";
  24. position: absolute;
  25. top: -5px;
  26. left: 20px;
  27. width: 11px;
  28. height: 11px;
  29. border-radius: 10px;
  30. background-color: #fff;
  31. }
  32. @-webkit-keyframes loader1{
  33. 0%{-webkit-transform:rotate(0deg);}
  34. 100%{-webkit-transform:rotate(360deg);}
  35. }
  36. @keyframes loader1{
  37. 0%{transform:rotate(0deg);}
  38. 100%{transform:rotate(360deg);}
  39. }
  1. <div id="container">
  2. <div class="loader1"></div>
  3. </div>
  4. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
m1m5dgzv

m1m5dgzv1#

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

  1. window.addEventListener("load", function() {
  2. document.body.style.overflow = "hidden"
  3. window.setTimeout(() => {
  4. loader.style.display = "none";
  5. document.body.style.overflow = "auto"
  6. }, 1000)
  7. })
ttvkxqim

ttvkxqim2#

您可以添加代码

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

在函数settimeout()中

相关问题