[javascript] Hammer.js를 사용하여 터치 이벤트를 공지사항 스크롤에 적용하는 방법은?

27 Nov 2023

javascript

Hammer.js 라이브러리를 다운로드하고 HTML 파일에 추가합니다.

<script src="https://cdn.jsdelivr.net/npm/hammerjs"></script>

JavaScript 코드를 작성하여 Hammer.js를 초기화하고 공지사항 스크롤에 터치 이벤트를 적용합니다.

// 공지사항 스크롤 엘리먼트를 선택합니다.
var scrollElement = document.getElementById("notice-scroll");

// Hammer.js 인스턴스를 생성합니다.
var hammer = new Hammer(scrollElement);

// 사용할 터치 제스처를 추가합니다. 여기서는 스와이프 제스처를 사용합니다.
hammer.on("swipe", function(event) {
  // 스와이프 방향에 따라 스크롤 위치를 조정합니다.
  if (event.direction === Hammer.DIRECTION_UP) {
    scrollElement.scrollTop -= 100; // 위쪽 스와이프시 스크롤 위로 이동
  } else if (event.direction === Hammer.DIRECTION_DOWN) {
    scrollElement.scrollTop += 100; // 아래쪽 스와이프시 스크롤 아래로 이동
  }
});

위의 코드에서 scrollElement는 공지사항 스크롤을 가리키는 엘리먼트입니다. 이 엘리먼트에 Hammer.js 인스턴스를 생성하고 swipe 이벤트를 감지하도록 설정합니다. swipe 이벤트가 발생하면 스와이프 방향에 따라 스크롤 위치를 조정합니다.

위 코드를 웹 페이지에 적용하면 공지사항 스크롤을 터치하여 위쪽이나 아래쪽으로 스와이프할 때 스크롤이 자동으로 이동합니다.