[javascript] Hammer.js를 사용하여 스크롤 이벤트를 처리하는 방법은?

27 Nov 2023

javascript

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

// 스크롤 동작을 감지하는 함수
function handleScroll(event) {
  // 이벤트에서 스크롤 위치 가져오기
  var scrollY = window.scrollY;

  // 스크롤 위치를 이용한 원하는 동작 수행
  // 예: 화면에 스크롤 위치를 표시하는 로직
  // 예: 스크롤 위치에 따라 특정 요소의 스타일 변경 로직

  console.log('스크롤 위치:', scrollY);
}

// 스크롤 이벤트 핸들러 등록
hammer.on('pan', handleScroll);

위의 예제 코드에서는 Hammer.js를 사용하여 pan 이벤트를 감지하고, handleScroll 함수를 호출해 스크롤 동작을 처리합니다. window.scrollY를 사용하여 현재 스크롤 위치를 가져올 수 있고, 이를 이용하여 필요한 동작을 수행할 수 있습니다.

참고로, Hammer.js를 사용하기 위해 해당 라이브러리를 먼저 프로젝트에 추가해야 합니다. 페이지 상단에 다음 스크립트 태그를 추가하여 Hammer.js를 가져올 수 있습니다.

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

더 자세한 내용은 Hammer.js 공식 문서를 참고하시기 바랍니다.