Нажмите и перетащите прокрутку, чтобы иметь импульс при выпуске

Question

Две вещи, которые мне нужны, это то, что вы можете выбирать скорость прокрутки при перетаскивании, и после отпускания она все равно будет немного двигаться, а не останавливаться мгновенно.

код: 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;
});

Answer 1

Вам нужно увеличивать scrollLeft на определенную величину с каждым кадром, после наведения мыши, пока скорость не станет 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;
  }..