Question

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

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

Answer 1

您需要在每一帧中将scrollLeft每帧增加一定数量，然后将鼠标移至速度变为0。类似于=>

<select id="sel">
  <option value="car">1</option>
  <option value="bike">2</option>
  <option value="cycle">3</option>
</select>

<button>Click me</button>

<p id="demo"></p>

释放时单击并拖动滚动条具有动力

1 个答案: