Question

我找到了一个简单的Codepen，它使我可以拖动和滚动带有图像的画廊。它工作正常，但是我需要一种向此功能添加“平滑抓取/滚动”的方法。基本上，我想在iPhone上模拟滚动条。

有人可以帮我吗。我是Java语言的初学者。这是代码的链接：Horizontal Click and Drag Scrolling with JS

const slider = document.querySelector('.items');
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) * 3; //scroll-fast
  slider.scrollLeft = scrollLeft - walk;
  console.log(walk);
});

谢谢。

Answer 1

如果我正确理解了您的问题，则您想模仿在iOS上发布滚动项目后，滚动项目减速到停止的方式。

1）首先，我们需要在drop_duplicates()事件监听器中添加以下两行来跟踪其拖动时的速度：

id_a

2）拖动完成后，我们创建了一个框架循环，该循环继续以拖动速度滚动，使每次迭代的速度减慢，直到停止为止。

id_b

3）最后，当用户开始与滚动项目进行交互时，取消动量循环

mousemove

看到它在这里工作：
https://codepen.io/loxks/details/KKpVvVW

添加缓动/平滑滚动以使用JS单击并拖动

1 个答案: