반응형
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;
});
반응형
'JavaScript > 실습' 카테고리의 다른 글
[javascript] 최대공약수, 최소공배수 (0) | 2023.12.07 |
---|---|
[javascript] 369게임(문자검색 match, 배열요소결합 join, 배수 %, 내림 math.floor) (0) | 2023.01.21 |
[javascript] input 이벤트 (0) | 2023.01.20 |
[javascript] form 전송 및 막기, if 문 (0) | 2023.01.17 |
[javascript] 제이쿼리(jquery) 자바스크립트 모달창 (0) | 2023.01.16 |
댓글