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

27 Nov 2023

javascript

Hammer.js를 사용하여 터치 동작 중에 스크롤 이벤트를 제어하는 방법은 다음과 같습니다.

라이브러리 설치 Hammer.js를 사용하기 위해 먼저 라이브러리를 설치해야 합니다. npm을 사용한다면 아래 명령어를 실행해주세요.
```
npm install hammerjs
```
Hammer.js 설정 Hammer.js를 사용하기 위해 스크롤 이벤트를 인식할 요소에 Hammer.js를 설정해야 합니다. HTML 파일에서 스크롤을 제어하고자 하는 요소에 아래와 같이 Hammer.js를 초기화합니다.
```
<div id="scrollContainer">
  ...
</div>

<script>
  var scrollContainer = document.getElementById('scrollContainer');
  var hammer = new Hammer(scrollContainer);
</script>
```
스크롤 이벤트 제어 Hammer.js를 설정한 후에는 스크롤 동작 중에 어떤 동작을 제어하고싶은지 정의할 수 있습니다. 예를 들어, 수평 스크롤 중에 수직 스크롤을 막고 싶다면 아래와 같이 코드를 작성할 수 있습니다.
```
hammer.get('pan').set({ direction: Hammer.DIRECTION_ALL });

hammer.on('panup pandown panleft panright', function (e) {
  // 수평 스크롤 중에 수직 스크롤을 막음
  if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
    e.preventDefault();
  }
});
```
위 코드에서는 hammer.get('pan').set({ direction: Hammer.DIRECTION_ALL })를 사용하여 요소에서 가로와 세로 스크롤 이벤트를 모두 인식하도록 설정했습니다. 이후 hammer.on을 사용하여 이벤트를 처리하며, e.preventDefault()를 사용하여 터치 동작 중에 수직 스크롤을 막았습니다.

이렇게 Hammer.js를 사용하여 터치 동작 중에 스크롤 이벤트를 제어할 수 있습니다. 자세한 내용은 Hammer.js의 공식 문서를 참고하시기 바랍니다.

참고 문서

Hammer.js 공식 문서