🖱️ 마우스 드래그로 스크롤 구현하기

처음으로 모바일 퍼스트 웹을 구현하게 되었다. 처음에는 touch 이벤트는 또 어떻게 구현하는 거지? 하고 엄청 겁을 먹었었는데 대부분의 touch 이벤트도 클릭과 동일하게 구현하면 됩니다 ! 라고 해서 휴 ! 하고 안심했던 기억이 있다.

그런데 !!! 모바일에서는 터치로 자연스럽게 좌우로 스크롤이 되는 카테고리 컴포넌트 가 데스크탑으로 넘어오면 스크롤 바를 이용하지 않고는 스크롤을 할 수 없다는 걸 알게되었다. 해당 컴포넌트를 담당하신 분이 '스크롤바를 숨기고 싶었지만 숨기면 스크롤이 안됩니다' 라고 하셔서 그게 무슨 소리지?? 하고 당시에는 내 구현도 바빠서 넘어갔다가 프로젝트 마무리 후 시간을 내어서 리팩토링을 해보게 되었다.

스크롤바를 숨기는 건 간단했다.

// app > globals.css 
.scrollbar-hide {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

를 작성하고 스크롤 바를 숨기려는 컴포넌트에 클래스명으로 scrollbar-hide를 달아주었다.

그러고 나서도 스크롤이 잘된다고 생각하면서 다른 부분 리팩토링 작업을 잘 하고 있었는데...
문득 나는 트랙 패드를 쓰고 있다는 사실을 깨달았다....!

일반 마우스는 가로 스크롤을 어떻게 하지........?
그래서 클릭으로 옮기려고 아무리 해봐도 안되어서 이거 때문에 하신 말씀이었구나 하면서
방법을 찾기 시작했다...!

일단 마우스 드래그로 스크롤 키워드로 구글링을 엄청 해보면서 몇개의 포스팅을 찾아내게 되었다.

✨Event Listeners

• mousedown
  • 마우스 포인터가 요소 범위 안에 있으면서 마우스 왼쪽 버튼이 눌러졌을 때 실행
  • 마우스 드래그 이벤트 시작을 이 이벤트를 통해 알 수 있음
• mousemove
  • 마우스 커서의 핫스팟이 요소 범위 안에 있으면서 커서를 움직였을 때 발생
  • mousemove 이벤트에다 스크롤을 발생시켜주는 로직을 넣어야 함 !
• mouseup
  • 요소 범위 안에서 눌러져있던 마우스 커서를 뗐을 때 발생
  • 이때 드래그 동작을 종료시켜 주면 된다
• mouseleave
  • 포인터 커서가 요소 범위를 벗어났을 때 발생
  • 이때 역시 mouseup과 동일하게 드래그 동작이 종료되어야 할 것 !

---

내가 작성한 코드는 다음과 같다.

  const scrollRef = useRef<HTMLDivElement>(null); // DOM에 접근하기 위한 ref 값
  const [isDragging, setIsDragging] = useState(false); // 드래그 중인가 ?
  const [startX, setStartX] = useState(0); // 드래그 시작 지점
  const [scrollLeft, setScrollLeft] = useState(0); // 현재 스크롤 위치: 자동 업데이트

  const handleMouseDown = (e: React.MouseEvent) => {
    if (!scrollRef.current) return;
    
    setIsDragging(true); // 드래그( 스크롤 ) 시작
    setStartX(e.pageX - scrollRef.current.offsetLeft); // 클릭 위치를 기준점 지정
    setScrollLeft(scrollRef.current.scrollLeft); // 시작전 scrollLeft 값 지정
  };

  const handleMouseMove = (e: React.MouseEvent) => {
    if (!isDragging || !scrollRef.current) return; // 과한 계산 방지 !
    e.preventDefault(); 
    e.stopPropagation();
    const x = e.pageX - scrollRef.current.offsetLeft; // 현재 마우스 X 위치 계산
    const walk = (x - startX) * 2; // 이동 거리( 부드러운 이동 )
    scrollRef.current.scrollLeft = scrollLeft - walk; // 스크롤 거리만큼 스크롤 이동
  };

  const handleMouseUp = () => {
    setIsDragging(false); // 드래그 중단 !
  };

// ...codes

<div ref={scrollRef}
	onMouseDown={handleMouseDown}
	onMouseMove={handleMouseMove}
	onMouseUp={handleMouseUp}
	onMouseLeave={handleMouseUp}
	className={`scrollbar-hide scroll-smooth  ${isDragging ? 'cursor-grabbing' : 'cursor-grab'}`}`}

👩‍💻 최종 정리

• scrollLeft는 div의 현재 수평 스크롤 위치(px)
• 유저가 마우스로 클릭( mousedown )하면 scrollLeft를 저장
• 마우스를 이동( mousemove )할 때 기존 scrollLeft 값에서 새로운 위치를 계산하여 스크롤 이동
• 마우스를 떼면( mouseup ) 혹은 마우스가 떠나면( mouseleave ), isDragging을 false로 설정하여 드래그 종료.

🚀 참고한 링크

• 리액트로 만들어보는 마우스 드래그 좌우스크롤 컴포넌트
• [React] 마우스 드래그로 스크롤 구현하기 - 라이브러리 X
  
• Click and Drag to Scroll