---

웹 페이지에서 가로로 길어지는 테이블이나 카드 리스트를 다룰 때, 기본 스크롤바 외에도 마우스 드래그나 모바일 터치 동작으로 부드럽게 스크롤되도록 구현하는 Vanilla JavaScript 기법을 정리합니다.

 

1. 동작 미리보기 (Demo)

아래 영역을 마우스로 클릭한 채 좌우로 드래그하거나, 모바일 환경에서 손가락으로 밀어서 스크롤해 보세요.

 

2. 핵심 JavaScript 소스 코드

마우스 이벤트(mousedown, mousemove, mouseup, mouseleave)와 터치 이벤트(touchstart, touchmove, touchend)를 동시에 지원하도록 개선된 코드입니다.

const slider = document.querySelector('.rtable');
let isMouseDown = false;
let startX, scrollLeft;

// 드래그 시작 (마우스 / 터치)
const startDragging = (e) => {
  isMouseDown = true;
  slider.classList.add('active');
  const pageX = e.pageX || (e.touches && e.touches[0].pageX);
  startX = pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
};

// 드래그 종료
const stopDragging = () => {
  isMouseDown = false;
  slider.classList.remove('active');
};

// 드래그 이동
const moveDragging = (e) => {
  if (!isMouseDown) return;

  const pageX = e.pageX || (e.touches && e.touches[0].pageX);
  const x = pageX - slider.offsetLeft;
  const walk = (x - startX) * 1.5; // 스크롤 속도/민감도 조절
  slider.scrollLeft = scrollLeft - walk;
};

// 마우스 이벤트 등록
slider.addEventListener('mousedown', startDragging);
slider.addEventListener('mouseleave', stopDragging);
slider.addEventListener('mouseup', stopDragging);
slider.addEventListener('mousemove', moveDragging);

// 터치 이벤트 등록 (모바일 지원)
slider.addEventListener('touchstart', startDragging);
slider.addEventListener('touchend', stopDragging);
slider.addEventListener('touchmove', moveDragging);

 

3. 구현 포인트 및 주요 기능

• 상태 플래그 활용: isMouseDown 변수를 두어 클릭한 채 이동하는 동안에만 스크롤 위치(scrollLeft)가 계산되도록 처리했습니다.
• 모바일 반응형 지원: e.touches[0].pageX 구문을 추가하여 모바일 기기의 터치 드래그에서도 완벽하게 동작합니다.
• 사용자 경험(UX) 개선: user-select: none 속성을 적용하여 드래그 중에 글자가 파랗게 선택되는 현상을 방지했습니다.