현재 사이트처럼 스크롤이 버벅이는 이유가 무엇일까요?
본문
현재 사이트내에 스크롤시 버벅임 현상이있는데 코드 내용은 이렇습니다.
<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;
이런식으로 수정하셔야 될겁니다.
