JavaScript/실습
[javascript] 마우스 드래그 스크롤 만들기
Angry Stock
2023. 10. 16. 10:32
반응형
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;
});
반응형