현재 사이트처럼 스크롤이 버벅이는 이유가 무엇일까요?

현재 사이트처럼 스크롤이 버벅이는 이유가 무엇일까요?

QA

현재 사이트처럼 스크롤이 버벅이는 이유가 무엇일까요?

본문

https://mjboutique.uriweb.kr/

현재 사이트내에 스크롤시 버벅임 현상이있는데 코드 내용은 이렇습니다.

 

<style>
  #s20200528474e9cf171284 {height:100vh; }
  #w2020052962b4e17f6ef8a {height:100vh;}
      .main_body_bg {
        width:100%;
    height: 100vh;
    position: absolute;
        top:-90px;
        bottom:0;
    background: url(https://cdn.imweb.me/upload/S2020052873456ecca4a06/2f110f54fb92a.png) center center no-repeat;
}
  .main_txt {position:absolute; top:50%; left:5%;  z-index:99999;text-align:center; margin-top:-60px; }
  .main_txt span {color:#fff; font-family:'S-CoreDream-4Regular','san-serif'; line-height:1.4em; }
  
  
  *, *:before, *:after {
  box-sizing: border-box;
}

@-webkit-keyframes scrollBad {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -2000px;
  }
}
@keyframes scrollBad {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -2000px;
  }
}
@-webkit-keyframes scrollGood {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -2000px, 0);
            transform: translate3d(0, -2000px, 0);
  }
}
@keyframes scrollGood {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -2000px, 0);
            transform: translate3d(0, -2000px, 0);
  }
}


.panel {
  padding: 3rem;
  height: 50%;
}

.intro_bgbg {
  background-color: #3E69C3;
  background-image: url(https://cdn.imweb.me/upload/S2020052873456ecca4a06/acdeabfc9c595.png);
  background-position: top center;
  width:765px;
  height:100vh; 
  margin:auto;
  -webkit-animation: scrollBad 10s linear infinite;
  animation: scrollBad 10s linear infinite;
}
  .main_smba_logo {position:absolute; bottom:5%; left:5%; z-index:999;}
</style>
 <span class="main_smba_logo" style="" >
<img src="https://cdn.imweb.me/upload/S2020052873456ecca4a06/f92b0bdc07cf3.png" class="fr-fin fr-dib">
</span>
<div class="main_txt">
  <!--<span style="font-size:40px;">아름다움을 부의 가치로 승화시키는</span> <br/>
  <span style="font-size:60px;">즐거운 기업</span>-->
  <img src="https://cdn.imweb.me/upload/S2020052873456ecca4a06/d06e643d55a74.png" class="fr-fin fr-dib">
</div>
<div class="main_body " id="intro" style="height:100vh; margin-top:-90px;">
  <div class="main_body_bg"></div>
            <div class="container" id="main_container">
                <div class="intro_space">
                    <div class="intro_bgbg panel"></div>
                    <!--<img src="http://www.eoapps.co.kr/theme/eoapps/images/intro_space.jpg" alt="" style="display: inline;">-->  
                </div>
            </div>
  </div>
    

<!--<div class="main_body">
   <video autoplay playsinline muted loop preload>
       <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4">
   </video>
    <svg height="100%" width="100%">
        <defs>
            <mask id="mask" x="0" y="0" height="100%" width="100%">
               <rect x="0" y="0" height="100%" width="100%" />
               <div><img x="50%" y="50%" src="https://cdn.imweb.me/upload/S2020052873456ecca4a06/15418e2f8b5d7.png" class="fr-fin fr-dib"/></div>
            </mask>
        </defs>
        <rect x="0" y="0" height="100%" width="100%" />
    </svg>
    </div>-->

이 질문에 댓글 쓰기 :

답변 1

javascript 가 없네요 

 

기본 스크롤 동작이랑 중복되어서 버벅이는 것처럼 보입니다.

스크롤을 한번씩만 하면 이상없으니까

 

해당 사이트에서 스크롤을 내리면 자동으로 내려가는 부분이 동작할때

scroll 이벤트를 처리해서

event.returnValue = false;

한뒤에 해당 동작이 끝나면 

event.returnValue = true;

이런식으로 수정하셔야 될겁니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 138
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT