scroll.js scroll.css scroll.html-x 필요한 jqueryui : 라이브러리 애니메이션에 easing효과를 주기 위해
라이브러리 CDN :
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
css에서 창의 스크롤를 숨기기 위해
html,body{
height:100%;
overflow:hidden;
}
body안에 다시 전체를 감쌀 요소를 만든다. 이 요소 안에 필요한 모든 내용이 들어간다.
main{
height:100%;
overflow:hidden;
position:relative;
}
js
var last=0;
var scrollEvent=true;
var moveTop=null;
$(window).on('DOMMouseScroll mousewheel', function(e){
if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
if(scrollEvent){
if(moveTop==last && moveTop>0){
moveTop--;
scrollEvent=false;
}else{
last=moveTop
}
}else{
scrollEvent=true;
}
}else{
if(scrollEvent){
if(moveTop==last){
moveTop++;
}else{
last=moveTop
}
scrollEvent=false;
}else{
scrollEvent=true;
}
}
console.log("moveTop : "+moveTop);
$("html,body").stop().animate({
scrollTop:moveTop*300
},700,"easeOutQuad");
});