[javascript] 자바스크립트에서 터치 이벤트를 사용하여 화면 스크롤 동작을 막는 방법은?

12 Dec 2023

document.addEventListener('touchmove', function(e) {
  e.preventDefault();
}, { passive: false });

이 코드는 touchmove 이벤트가 발생할 때 기본 동작인 화면 스크롤을 중지합니다. { passive: false } 옵션은 이벤트 핸들러가 preventDefault를 호출하여 기본 동작을 중지할 수 있도록 합니다.

더 효율적인 방법으로는 스크롤을 막아야 하는 조건을 추가하여 특정 요소에만 스크롤 동작을 막을 수도 있습니다. 이 예시 코드를 참고하여 자신의 요구에 맞게 수정해보세요.

참고 문서:

“Add passive event listeners” - https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_event_listeners
“Touch events” - https://developer.mozilla.org/en-US/docs/Web/API/Touch_events