마우스 드래그로 좌우 스크롤이 되는 슬라이더 만들기

웹페이지의 요소의 내용이 요소 자체의 크기를 초과할 경우, 스크롤이 되는 슬라이더가 자동으로 생깁니다.
일반적으로 마우스 휠을 사용해 스크롤하지만, JavaScript를 활용하면 드래그로도 스크롤을 할 수 있습니다.
이 글에선 드래그를 사용한 기본적인 좌우 스크롤을 구현합니다.

---

튜토리얼 정보

• 출처: JavaScript30
• 이름: Day 27 - Click and Drag to Scroll
• 언어: JavaScript
• 목표: 웹페이지 요소를 드래그하고 좌우로 움직였을 때 스크롤과 같은 효과 구현하기

진행 기간

2020년 5월 11일

---

마우스 이벤트와 슬라이더 연동시키기

마우스가 현재 드래그 중이라는 것을 인식시키기 위해, 관련 마우스 이벤트^[각주:1]를 슬라이더와 연동시켜줘야 합니다.

현재 마우스가 클릭 중인지를 지속적으로 저장할 변수 isMouseDown^[각주:2]을 만들어주고, 각 마우스 이벤트에 따라 true, false 값이 저장되도록 코드를 작성합니다.

• 참고 코드
  

  

드래그 시작 위치 파악하기

드래그를 스크롤로 변환하려면 드래그를 얼마의 거리만큼 했는지를 알아야 합니다.
드래그 거리를 구하려면 드래그를 시작한 지점의 위치 정보가 필요하므로, 위의 코드에서 mousedown 이벤트와 관련된 부분을 변경해줍니다.

드래그를 시작한 지점의 x 좌표를 변수 startX에 저장^[각주:3]하고 슬라이더가 현재 얼만큼 스크롤되었는지 변수 scrollLeft에 저장한다.

• 참고 코드
  

  

드래그 거리 스크롤로 전환하기

마지막으로 드래그한 거리를 스크롤한 길이로 전환해줍니다. 이번에는 mousemove 이벤트 관련 부분을 수정합니다.

드래그 중^[각주:4]이어야 하기 때문에 만약 클릭되어 있지 않을 경우 우선 함수의 실행을 중지한 다음, 의도치 않은 동작을 막기 위해 preventDefault( ) 메서드^[각주:5]를 사용합니다.

현재 커서가 위치한 x 좌표^[각주:6]를 계산해, 드래그한 거리를 walk 변수에 저장합니다. 스크롤으로 전환되는 비율을 조절하고 싶다면 배수를 1에서 다른 숫자로 바꿔주면 됩니다.

마지막으로 슬라이더의 스크롤한 거리를 scrollLeft에서 walk만큼 빼주면 드래그한 거리만큼 스크롤한 거리에 추가되어, 정상적으로 작동하게 됩니다.

• 참고 코드
  

  

---

GitHub 저장소 링크

---

1. mousedown, mouseleave, mouseup, mousemove를 말합니다. [본문으로]
2. 값이 바뀔 수 있어야 하기 때문에 const가 아닌 let으로 변수를 선언합니다. [본문으로]
3. 슬라이더에 대한 상대적 x 좌표여야 하므로, 슬라이더의 왼쪽 여백은 제외해줘야 합니다. [본문으로]
4. 마우스가 클릭된 상태로 움직이는 것을 드래그라고 합니다. [본문으로]
5. 참고자료: Event.preventDefault() - Web APIs | MDN [본문으로]
6. 이 또한 슬라이더에 대한 상대적 x 좌표이므로, 슬라이더의 왼쪽 여백을 제외해줘야 합니다. [본문으로]