pageSet 

페이지 스크롤을 자유롭게! 

<style type="text/css">
    /*  하단 속성 반드시 필요 */
    body,html{height:100%;}     
    body{ margin:0; padding:0;} 
    .sbox-wrap{ position: relative; height:100%; }
    .sbox{   width: 100%;height:100%; position:relative}
</style>
<script>
/* Jquery 라이브러리 반드시 필요 */
var pageset;
$(document).ready(function(e){
    pageset = $('.sbox-wrap').pageset({
        speed : 500,  /*스크롤 속도*/
        startSpeed : 0, /* 처음 시작 속도 */
        mode : 'transition',  /* 모드: transition , scroll (scroll 모드는 모바일 미지원)  */
        touchmoving : true, /* 터치 활성화 */
        mousemoving : true, /* 마우스 활성화 */
        sboxClass : '.sbox', /* 각 페이지 아이템 클래스 */
        sboxLastHeight : 'auto', /* 마지막 아이템 높이: auto or window height */ 
        sboxLastSpeed : false, /*  마지막 아이템에 도달했을 시 속도 false 또는 마이크로초 */
        debug : false, /*디버깅*/
        hash : false, /*URL해시 사용여부 */
        easing : 'swing', /* 모드가 스크롤일 시 사용가능, 기본 easing 은 아직 미지원 */

        /* 이벤트  */
        on : {
            load : function(){},    
            pagesetToStart : function(){},
            pagesetToEnd : function(){},
            pagesetPrev : function(){},
            pagesetNext : function(){},
            resize : function(){},
            complete : function(){},
        }
    }); 


    /* 객제접근 */
    console.log(pageset.el.currentIndex); /* 현재 index (0부터 시작) */

    /* 이벤트 (pagesetToStart: 페이지 이동 시작 시점) */
    pageset.on('pagesetToStart',function(){
        console.log('Event: pagesetToStart ');
    });

    /* 이벤트 (pagesetToEnd: 페이지 이동 종료 시점) */
    pageset.on('pagesetToEnd',function(){
        console.log('Event: pagesetToEnd ');
    });

    /* 이벤트 (pagesetNext: 다음 페이지 이동시) */
    pageset.on('pagesetNext',function(){
        console.log('Event: pagesetNext ');
    });

    /* 이벤트 (pagesetPrev: 이전 페이지 이동시) */
    pageset.on('pagesetPrev',function(){
        console.log('Event: pagesetPrev ');
    });

    /* 이벤트 (resize: 사이즈 변경시) */
    pageset.on('resize',function(){
        console.log('Event: resize ');
    });

    /* 이벤트 (complete: 이벤트 완료시-모든이벤트 기준) */
    pageset.on('complete',function(){
        console.log('Event: complete ');
        console.log(pageset.el.currentIndex); /* 현재 index (0부터 시작) */
    });

    /* 메소드 (pagesetPrev: 이전페이지) */
        //pageset.pagesetPrev(500);

    /* 메소드 (pagesetNext: 다음페이지) */
        //pageset.pagesetNext(500);

    /* 메소드 (pagesetTo: 이동 - index 값 입력) */
        //pageset.pagesetTo(4);

});

</script>   

<div class="sbox-wrap">
    <div class="sbox" style="background-color: red;"></div>
    <div class="sbox" style="background-color: blue;"></div>
    <div class="sbox" style="background-color: yellow;"></div>
    <div class="sbox" style="background-color: orange;"></div>
    <div class="sbox" style="background-color: gray;"></div>
    <div class="sbox" style="background-color: rgb(255, 0, 68);"></div>
    <div class="sbox" style="background-color: rgb(51, 102, 153);"></div>
</div>
<div class="btn" style="position:absolute; bottom:0; left:0; right:0; width:100%; padding:10px 0;background-color: #060014; text-align: center; color:#333; z-index: 999;">
    <a href="#none" onclick="pageset.pagesetPrev(500);" style="color:#fff; margin:0 10px;">이전</a>
    <a href="#none" onclick="pageset.pagesetNext(500);" style="color:#fff; margin:0 10px;">다음</a>
</div>