>source

다음 code가 있습니다.

//Preloader
 $(window).on('DOMContentLoaded', function() {
    if ($('#preloader').length) {
      $('#preloader').delay(500).fadeOut('slow');
    }
});
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500;700&
family=Montserrat:wght@400;600&
family=Oswald:wght@500&
family=Pacifico&
family=Roboto:ital,wght@0,400;0,900;1,500&
display=swap');
.svg-file {
  width:40vw;
  max-width:133px;
}
.svg-file path {
    fill: transparent;
    stroke-width: 3;
    stroke: rgb(1, 36, 133);
}
.svg-file.z-logo path {
    stroke-dasharray: 550;
    stroke-dashoffset: 0;
}
.svg-file.z-logo path {
    animation: animate-zlogo 2s linear infinite;
}
.svg-file.z-logo svg {
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1));
    transform: scale(2);
}
.svg-file h2 {
    font-family: "Roboto", cursive;
    transform: translate(0, 50px) skewX(-210deg) rotate(-6deg);
    font-size: 3em;
    color: #044d77;
}
.svg-file span {
    animation: dots 2.5s steps(6, end) infinite;
    font-size: 5em;
    display: block;
    transform: translate(0, 65px) skewX(-210deg) rotate(-6deg);
    background-color: rgb(5, 46, 80);
    width: 8px;
    height: 5px;
}
@keyframes fadein-fadeout {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes animate-zlogo {
    0% {
        stroke-dashoffset: -50;
    }
    20% {
        stroke-dashoffset: 550;
        fill: transparent;
    }
    40% {
        fill: transparent;
        stroke-dashoffset: 1100;
    }
    60% {
        stroke-dashoffset: 1100;
        fill: #05f7f9;
        }
    80% {
        stroke-width: 0;
       fill: #05f7f9;
    }
    100% {
        /* stroke-dashoffset: 0; */
        stroke-width: 3;
        fill: transparent;
    }
}
#preloader {
  position: fixed;
  z-index: 9999;
  overflow: hidden;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
}
.z-logo svg {
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  margin: auto;
  justify-content: center;
  align-items: center;
  align-content: center;
  position: relative;
  display: flex;
  width: 50%;
}
.z-logo::before {
  content: "";
    top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  margin: auto;
  background: black;
  position: absolute;
  display: inline-flex;
  border: 1px solid black;
  width: 60vw;
  max-width: 200px;
  height: 60vw;
  max-height: 200px;
}
<!--Preloader -->    <div id="preloader">        <div class="svg-file z-logo">            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133 133" width="133" height="133">                <g id="H">                    <path d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z"
                     fill="#47AF9A" />                </g>            </svg>        </div>    </div>  <section>  Scroll bar should now appear
  </section>   <section>random content
</section><section>random content
</section><section>random content
</section><section>random content
</section><section>random content
</section><section>random content
</section><section>random content
</section><section>random content
</section><section>random content
</section><section>random content
</section><section>random content
</section>

위의 code를 실행하면 스크롤바가 잠시 동안 어떻게 나타나는지 보시겠습니까? 나는 그것을 원하지 않는다. 스크롤바가 프리 로더 화면 이후 또는 프리 로더가 사라질 때만 나타나기를 원합니다. 프리 로더 화면에서 스크롤 막대 (x 및 y 모두) 만 숨기는 방법이 있습니까? 어떤 제안이 있습니까?

  • 이전 reactjs : 정의되지 않은 필드를 어린이에게 소품으로 전달하는 방법
  • 다음 PWA : 외부 URL을 열 때 주소 표시 줄 숨기기