무한 스크롤은 사용자가 스크롤을 하다가 페이지 하단에 도달하면 새로운 콘텐츠를 자동으로 추가하는 기능입니다. Hammer.js는 터치 이벤트를 처리하는 JavaScript 라이브러리로, 이를 사용하여 터치 스크롤을 제어할 수 있습니다.

먼저, Hammer.js를 HTML 문서에 포함해야 합니다. 다음은 Hammer.js를 불러오는 예시입니다.

<script src="https://cdn.jsdelivr.net/hammerjs/2.0.8/hammer.min.js"></script>

Hammer.js를 포함한 후에는 스크롤할 요소에 Hammer 인스턴스를 생성하고 터치 이벤트를 처리할 함수를 정의합니다. 다음은 Hammer.js를 사용하여 터치 이벤트를 처리하는 예시입니다.

var element = document.getElementById('scroll-element');
var hammer = new Hammer(element);
var scrollOffset = 0;

hammer.get('pan').set({ direction: Hammer.DIRECTION_VERTICAL });

hammer.on('panup', function (e) {
  // 스크롤 업 이벤트 처리 로직
  scrollOffset -= e.deltaY;
  element.style.transform = 'translateY(' + scrollOffset + 'px)';
});

hammer.on('pandown', function (e) {
  // 스크롤 다운 이벤트 처리 로직
  scrollOffset += e.deltaY;
  element.style.transform = 'translateY(' + scrollOffset + 'px)';
});

위의 예시에서는 scroll-element라는 id를 가진 HTML 요소에 터치 이벤트를 적용하고 있습니다. panup 이벤트와 pandown 이벤트에 대한 각각의 핸들러 함수를 정의하여 스크롤 작업을 수행하고 있습니다. 여기서는 deltaY 값에 따라 요소를 위로 또는 아래로 이동시키고 있습니다.

이제 터치 이벤트를 제어하는 Hammer.js를 사용하여 무한 스크롤을 구현할 수 있습니다. 스크롤이 화면 하단에 도달하면 새로운 콘텐츠를 가져올 수 있는 AJAX 요청 등의 로직을 추가하면 됩니다.