单击并拖动滚动以获得释放时的动力答案

【问题标题】：Click and drag scroll to have momentum when releasing单击并拖动滚动以获得释放时的动力
【发布时间】：2019-05-26 21:44:29
【问题描述】：

我需要做的两件事是您可以选择拖动时滚动的速度，释放时它仍然会移动一点，而不是立即停止。

codepen: https://codepen.io/rKaiser/pen/qGomdR

我可以将速度设置得足够近。合理地增加一些动力？或者也许有一个更合适的插件可以在这里使用？谢谢。

const slider = document.querySelector('.container');
let isDown = false;
let startX;
let scrollLeft;
slider.addEventListener('mousedown', (e) => {
  isDown = true;
  slider.classList.add('active');
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave', () => {
  isDown = false;
  slider.classList.remove('active');
});
slider.addEventListener('mouseup', () => {
  isDown = false;
  slider.classList.remove('active');
});
slider.addEventListener('mousemove', (e) => {
  if(!isDown) return;
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = (x - startX) * 0.3; //scroll-speed
  slider.scrollLeft = scrollLeft - walk;
});

【问题讨论】：

标签： javascript jquery css scroll

【解决方案1】：

你需要在每一帧增加一定量的 scrollLeft，在 mouseup 之后，直到速度变为 0。像 =>

slider.addEventListener('mouseup', () => {
  isDown = false;
  slider.classList.remove('active');
  speed = (-scrollLeft+slider.scrollLeft)/(new Date()-t)*500; //t is time of mouse down start

  const draw=()=>{
    if(speed>0){
      slider.scrollLeft = slider.scrollLeft + speed--; //increase by certain amount
    }else{
      momentum=false;
    }
    requestAnimationFrame(draw);
  }
    momentum=true;
    draw();
});



slider.addEventListener('mousemove', (e) => {
  if(!isDown && !momentum){
    return;
  }..

【讨论】：