[Javascript] 클릭해서 드래그로 가로 스크롤 구현 하기 (click and drag)

 

[목표]

가로 스크롤이 필요한 부분을 제공하는 스크롤을 이용해서가 아닌 마우스로 클릭 후 드래그하는 방법으로 구현해보고자 한다. 

 

[코드]

 

1. 변수 및 초기화 

//스크롤을 할 컨테이너를 선택 
const scrollContainer = document.getElementById("scrollContainer");

let isMouseDown = false; //사용자가 마우스를 클릭 했는지 여부를 추적
let startX; // 마우스를 클릭한 최초의 x 좌표 
let scrollLeft; // 드래그 시작 시 컨테이너의 가로 스크롤 위치

 

2. 마우스 누를때 이벤트 

    scrollContainer.addEventListener("mousedown", (e) => {
        isMouseDown = true; // 눌렀으니 true 로 바꿔준다 
        
        // 클릭한 페이지 X 좌표에서 요소의 왼쪽 경계를 뺀 값을 저장 
        // -> 그래야 시작할 때의 현 위치를 알 수가 있음 
        startX = e.pageX - scrollContainer.offsetLeft; 
        
        //드래그 시작 지점의 컨테이너의 가로 스크롤 위치를 저장 
        scrollLeft = scrollContainer.scrollLeft;
    });

 

3. 마우스를 out 이벤트 

//마우스가 컨테이너를 벗어 났을때 
scrollContainer.addEventListener("mouseleave", () => {
    isMouseDown = false;
});

//마우스를 놓았을 때 
scrollContainer.addEventListener("mouseup", () => {
    isMouseDown = false;
});

 

4. 마우스를 이동 시킬 때

 scrollContainer.addEventListener("mousemove", (e) => {
        if (!isMouseDown) return; 
        e.preventDefault(); //원래 기본 동작되는 모든 이벤트들을 막음 
        
        //현재 마우스가 있는 x 좌표에서 컨테이너의 왼쪽 경계를 뺀 값을 계산한다
        // -> e.pageX가 화면 전체의 X 죄표인데 여기서 실제로 움직일 컨테이너의 위치(여백)을 뺌
        const x = e.pageX - scrollContainer.offsetLeft; 
        
        //초기 위치에서 얼마나 움직였는지 판한 후 드래그 속도를 위해 *2 
        const walk = (x - startX) * 2; 
        
        //컨테이너를 이동시킴
        scrollContainer.scrollLeft = scrollLeft - walk;
    });

 

[완성코드]

const scrollContainer = document.getElementById("scrollContainer");

    let isMouseDown = false;
    let startX;
    let scrollLeft;

    scrollContainer.addEventListener("mousedown", (e) => {
        isMouseDown = true;
        startX = e.pageX - scrollContainer.offsetLeft;
        scrollLeft = scrollContainer.scrollLeft;
    });

    scrollContainer.addEventListener("mouseleave", () => {
        isMouseDown = false;
    });

    scrollContainer.addEventListener("mouseup", () => {
        isMouseDown = false;
    });

    scrollContainer.addEventListener("mousemove", (e) => {
        if (!isMouseDown) return;
        e.preventDefault();
        const x = e.pageX - scrollContainer.offsetLeft;
        const walk = (x - startX) * 2; 
        scrollContainer.scrollLeft = scrollLeft - walk;
    });