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

Question

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

谁能帮帮我。我是 Javascript 的初学者。这是代码的链接: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) 首先，我们需要通过将以下两行添加到 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