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

12 Dec 2023

javascript

터치 이벤트 등록

터치 이벤트를 사용하여 스크롤 동작을 감지하려면 touchstart, touchmove, touchend 이벤트에 대한 이벤트 리스너를 등록해야 합니다.

document.addEventListener('touchstart', handleTouchStart, false);        
document.addEventListener('touchmove', handleTouchMove, false);
document.addEventListener('touchend', handleTouchEnd, false);

터치 위치 추적

이후, 터치 시작점과 이동한 거리를 추적하여 스크롤 동작을 감지할 수 있습니다.

let startX, startY;

function handleTouchStart(event) {
    startX = event.touches[0].clientX;
    startY = event.touches[0].clientY;
}

function handleTouchMove(event) {
    // 이동한 거리 계산
    let deltaX = event.touches[0].clientX - startX;
    let deltaY = event.touches[0].clientY - startY;

    // 수평 스크롤 여부 확인
    if (Math.abs(deltaX) > Math.abs(deltaY)) {
        event.preventDefault(); // 수평 스크롤이 감지되면 기본 스크롤 동작 방지
        // 추가로 수평 스크롤을 처리하는 로직을 구현할 수 있음
    }
}

function handleTouchEnd(event) {
    // 터치 이벤트 종료 시 필요한 마무리 작업 수행
}

위 코드는 터치 이벤트를 사용하여 수평 스크롤 동작을 감지하는 방법을 보여줍니다. 필요에 따라 추가적인 로직을 구현하여 세부적인 스크롤 동작 감지 및 처리를 수행할 수 있습니다.