我发现了一个简单的 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);
});
提前致谢。
最佳答案
如果我正确理解了您的问题,您希望模拟滚动项目在您在 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
});
关于javascript - 添加缓动/平滑滚动以使用js单击和拖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59008427/