[Day26] Click and Drag to Scroll

[Day26] Click and Drag to Scroll

需要用到的技巧与练习目标

1. mousedown
2. mouseleave
3. mouseup
4. mousemove
5. pageX
6. offsetLeft

const slider =document.querySelector('.items');
let isDown = false
let startX;
let scrollLeft;

slider.addEventListener('mousedown',()=>{
isDown=true
silder.classList.add('active')
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft

})

slider.addEventListener('mouseleave',()=>{
isDown=false
silder.classList.remove('active')
})
slider.addEventListener('mouseup',()=>{
isDown=false
silder.classList.remove('active')
})
slider.addEventListener('mousemove',(e)=>{
if(!isDown)return
e.prvevntDefault();
const x =e.pageX-slider.offsetLeft
const walk = (x - startX) *3;
slider.scrollLeft = scrollLeft - walk
})