hammer.js: 모바일처럼 스크롤/스와이프

최근 터치스크린에서 돌아갈 웹앱(kiosk-like)을 구현하는 중,

웹에서도 모바일처럼 

• 드래그하면 스크롤이 이동하고 
• 스와이프로 슬라이드쇼를 넘기고 
• 핀치로 확대/축소도 가능해야 하며
• 더블클릭으로도 확대/축소가 이루어져야 하는 등

웹이지만 그냥 모바일이라고 착각하게 할만한 기능들이 필요했다. 

구현되어있는 라이브러리가 있었다 ㅎ_ㅎ 

아래 공식페이지에서 예제와 사용법을 볼 수 있다.

https://hammerjs.github.io/

용량도 7kb밖에 안되는데 위의 기능들 전부를 구현할 수 있다. 

(몇몇 기능은 브라우저에 제한이 있다)

Usage

아래는 스와이프만 갖다쓴 예.

    var element = document.getElementById("parent"); 
    var mc = new Hammer(element);
    mc.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
    
    mc.on("swipeup", function () { 
        var scrollValue = $(document).scrollTop();
        $('html,body').animate({
            scrollTop:'+='+150+'px'
        },600);
    }); 
    
    mc.on("swipedown", function () { 
        var scrollValue = $(document).scrollTop();
        $('html,body').animate({
            scrollTop:'-='+150+'px'
        },600);
    });