添加缓动/平滑滚动以使用 js 单击和拖动

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

有人可以帮我吗？我是 Javascript 的初学者。这是代码的链接：用JS实现水平点击拖动滚动 https://codepen.io/toddwebdev/pen/yExKoj

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

提前致谢。

如果我正确理解你的问题，你想模拟滚动项目在 iOS 上释放后减慢到停止的方式。

1）首先我们需要通过添加以下两行来跟踪它被拖动时的速度mousemove事件监听器：

var velX;
slider.addEventListener('mousemove', (e) => {
  if(!isDown) return;
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = (x - startX) * 3; 
  // Store the previous scroll position
  var prevScrollLeft = slider.scrollLeft; 
  slider.scrollLeft = scrollLeft - walk;
  // Compare change in position to work out drag speed 
  velX = slider.scrollLeft - prevScrollLeft; 
});

2) 拖动完成后，我们创建一个帧循环，该循环以拖动速度保持滚动，每次迭代减慢速度，直到停止。

slider.addEventListener('mouseup', () => {
  isDown = false;
  slider.classList.remove('active');
  beginMomentumTracking(); // Start a frame loop to continue drag momentum 
});

// Momentum 

var momentumID;

function beginMomentumTracking(){
  cancelMomentumTracking();
  momentumID = requestAnimationFrame(momentumLoop); 
}

function cancelMomentumTracking(){
  cancelAnimationFrame(momentumID);
}

function momentumLoop(){
  slider.scrollLeft += velX; // Apply the velocity to the scroll position
  velX *= 0.95; // Slow the velocity slightly
  if (Math.abs(velX) > 0.5){ // Still moving?
    momentumID = requestAnimationFrame(momentumLoop); // Keep looping 
  }
}

3) 最后当用户开始与滚动项交互时取消动量循环

slider.addEventListener('mousedown', (e) => {
  isDown = true;
  slider.classList.add('active');
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
  cancelMomentumTracking(); // Stop the drag momentum loop
});

// Listen for mouse wheel events
slider.addEventListener('wheel', (e) => {
  cancelMomentumTracking(); // Stop the drag momentum loop
});  

在这里查看它的工作情况：
https://codepen.io/loxks/details/KKpVvVW https://codepen.io/loxks/details/KKpVvVW