[javascript] Hammer.js를 사용하여 화면 스크롤 동작 중에 터치 이벤트를 처리하는 방법은?

27 Nov 2023

javascript

먼저, Hammer.js를 HTML 파일에 추가합니다.

<script src="https://hammerjs.github.io/dist/hammer.js"></script>

다음으로, 스크롤 가능한 요소에 Hammer.js를 적용합니다. 주로 body 요소나 스크롤 가능한 div 요소에 적용합니다.

<body>
  <!-- 스크롤 가능한 요소 -->
  <div class="scrollable">
    <!-- 내용 -->
  </div>

  <script>
    // 스크롤 가능한 요소 선택
    var scrollable = document.querySelector('.scrollable');

    // Hammer.js 인스턴스 생성
    var hammer = new Hammer(scrollable);

    // 터치 이벤트 리스너 추가
    hammer.on('tap swipe', function(event) {
      // 터치 이벤트 처리 코드
      console.log('터치 이벤트 발생: ' + event.type);
    });
  </script>
</body>

위의 코드에서 “.scrollable” 클래스를 가진 요소를 선택하고, Hammer.js 인스턴스를 생성합니다. 그리고 “tap” 또는 “swipe”와 같은 터치 이벤트에 대한 리스너를 추가합니다. 이벤트 핸들러 함수에서는 원하는 터치 이벤트를 처리할 수 있습니다. 이 예제에서는 터치 이벤트를 콘솔에 출력하도록 했습니다.

Hammer.js를 사용하면 스크롤 동작 중에도 터치 이벤트를 감지하고 처리할 수 있습니다. 이를 통해 웹 애플리케이션에서 더욱 다양한 터치 기반 인터랙션을 구현할 수 있습니다.