본문 바로가기
JavaScript/실습

[javascript] 마우스 드래그 스크롤 만들기

by Angry Stock 2023. 10. 16.
반응형
		let slider1 = document.querySelector('#original_list'); // scroll 이 적용된 id or class 선택
        let isDown1 = false;
        let startX1;
        let scrollLeft1;

            slider1.addEventListener('mousedown', e => {
                isDown1 = true;
                startX1 = e.pageX - slider1.offsetLeft;
                scrollLeft1 = slider1.scrollLeft;
            });
            slider1.addEventListener('mouseleave', () => {
                isDown1 = false;
            });

            slider1.addEventListener('mouseup', () => {
                isDown1 = false;
            });

            slider1.addEventListener('mousemove', e => {
                if (!isDown1) return;
                e.preventDefault();
                const x = e.pageX - slider1.offsetLeft;
                const walk = x - startX1;
                slider1.scrollLeft = scrollLeft1 - walk;
            });
반응형

댓글