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");
    });