슬라이드 대신 가로 스크롤 컴포넌트를 사용할 때 휠 스크롤하면 가로 스크롤되게 하는 JS

2023년 10월 6일

javascript, 프론트엔드

지난 글 “슬라이드 대신 가로 스크롤 컴포넌트를 사용할 때 스크롤바 모양 제어 CSS”에 이어지는 글입니다.

이런 가로 스크롤 컴포넌트는 JS 슬라이더 대신 사용할 수 있죠. 사이트를 무겁게 하지 않아서 좋습니다.

그런데 단점은 데스크톱에서 스크롤하기가 불편하다는 점입니다. 사실 Shift 키를 누르고 마우스 휠을 움직이면 가로 스크롤이 되는데, 아는 사람이 거의 없죠. 저도 얼마 전에 알았습니다.

그래서 그냥 이 컴포넌트 위에 마우스가 올라왔을 때는 휠이 가로 스크롤로 작동하도록 만들었습니다_{(ChatGPT의 도움을 받았습니다)}.

JS 모듈로 만들었으니 임포트해서 사용하면 됩니다.

임포트하지 않아도 함수로 만들어서 사용하셔도 됩니다.

구체적인 동작은 함수에 주석으로 달아 두었으니 확인하세요.

export default function initHorizontalScroll() {
    document.querySelectorAll(".js-horizontal-scroll").forEach(el => {
        el.addEventListener("wheel", e => {
            // 스크롤이 왼쪽 또는 오른쪽 끝에 도달했는지 확인
            const atLeftEnd = (el.scrollLeft === 0);
            const atRightEnd = (el.scrollLeft + el.offsetWidth >= el.scrollWidth);

            // 휠 이벤트가 위로 가는 것인지 아래로 가는 것인지 확인
            const scrollingUp = (e.deltaY < 0);
            const scrollingDown = (e.deltaY > 0);

            if ((atLeftEnd && scrollingUp) || (atRightEnd && scrollingDown)) {
                // 스크롤이 양 끝에 있고 사용자가 해당 방향으로 계속 스크롤하려고 하면,
                // 이벤트의 기본 동작을 수행하여 수직 스크론을 허용합니다.
                return;
            }

            // 그렇지 않으면, 가로 스크롤을 진행합니다.
            e.preventDefault();
            // noinspection JSSuspiciousNameCombination
            el.scrollLeft += e.deltaY;
        })
    });
}

아래는 코드펜 예시입니다.