[javascript] 터치 이벤트를 사용하여 양방향 스크롤을 처리하는 방법은?

12 Dec 2023

javascript

1. 터치 이벤트 핸들링 설정

// 요소 선택
const scrollWrapper = document.getElementById('scrollWrapper');

let startX, startY, currentX, currentY;

scrollWrapper.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
});

scrollWrapper.addEventListener('touchmove', (e) => {
  currentX = e.touches[0].clientX;
  currentY = e.touches[0].clientY;

  let diffX = startX - currentX;
  let diffY = startY - currentY;

  if (Math.abs(diffX) > Math.abs(diffY)) {
    // 가로 스크롤
    e.preventDefault();
    // 가로 스크롤 동작 처리
  } else {
    // 세로 스크롤
    e.stopPropagation();
    // 세로 스크롤 동작 처리
  }
});

위 코드는 터치 시작(touchstart) 및 터치 이동(touchmove) 이벤트를 핸들링하여 가로 및 세로 스크롤 동작을 구분하고 처리하는 방법을 보여줍니다.

2. CSS 속성 설정

#scrollWrapper {
  touch-action: pan-x pan-y;
  overflow: hidden;
}

touch-action 속성은 터치 액션의 동작을 지정하며, pan-x 및 pan-y 값은 각각 가로 및 세로 스크롤을 활성화하는 것을 의미합니다.

터치 이벤트를 사용하여 양방향 스크롤을 처리하는 방법에 대해 간단히 살펴보았습니다. 보다 자세한 내용은 MDN web docs에서 확인할 수 있습니다.