iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
自我挑戰組

JavaScript 30天 跟著一起做一遍!!!系列 第 26

[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
})

上一篇
## [Day25] Stripe Follow Along Dropdown
下一篇
## [Day27] Video Speed Controller UI
系列文
JavaScript 30天 跟著一起做一遍!!!30

尚未有邦友留言

立即登入留言