当前位置：首页 > JavaScript

js 实现滑动

2026-02-01 23:28:32JavaScript

使用 JavaScript 实现滑动效果

监听触摸事件实现滑动

通过监听 touchstart、touchmove 和 touchend 事件来实现滑动效果：

let startX, startY, moveX, moveY;

element.addEventListener('touchstart', (e) => {
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
});

element.addEventListener('touchmove', (e) => {
    moveX = e.touches[0].clientX - startX;
    moveY = e.touches[0].clientY - startY;
    element.style.transform = `translate(${moveX}px, ${moveY}px)`;
});

element.addEventListener('touchend', () => {
    // 滑动结束后的处理逻辑
});

使用 CSS Transition 平滑滑动

结合 CSS 的 transition 属性实现平滑的滑动动画：

element.style.transition = 'transform 0.3s ease';
element.style.transform = 'translateX(100px)';

通过 requestAnimationFrame 实现高性能滑动

使用 requestAnimationFrame 优化滑动性能：

js 实现滑动

let startTimestamp;
const duration = 1000; // 滑动持续时间（毫秒）

function slide(timestamp) {
    if (!startTimestamp) startTimestamp = timestamp;
    const progress = Math.min((timestamp - startTimestamp) / duration, 1);
    element.style.transform = `translateX(${progress * 100}px)`;
    if (progress < 1) {
        requestAnimationFrame(slide);
    }
}

requestAnimationFrame(slide);

实现惯性滑动效果

通过计算触摸释放时的速度来实现惯性滑动：

let startTime, endTime, startPos, endPos;

element.addEventListener('touchstart', (e) => {
    startTime = Date.now();
    startPos = e.touches[0].clientX;
});

element.addEventListener('touchend', (e) => {
    endTime = Date.now();
    endPos = e.changedTouches[0].clientX;
    const velocity = (endPos - startPos) / (endTime - startTime);

    // 根据速度计算惯性滑动距离
    const distance = velocity * 100;
    element.style.transition = 'transform 0.5s ease-out';
    element.style.transform = `translateX(${distance}px)`;
});

使用第三方库实现滑动

引入 Hammer.js 等专业手势库简化实现：

js 实现滑动

const hammer = new Hammer(element);
hammer.on('pan', (e) => {
    element.style.transform = `translateX(${e.deltaX}px)`;
});
hammer.on('panend', (e) => {
    // 滑动结束处理
});

实现限制边界的滑动

添加滑动边界限制防止元素滑出可视区域：

const maxSlide = 200;
let currentPosition = 0;

element.addEventListener('touchmove', (e) => {
    const newPosition = currentPosition + e.touches[0].clientX - startX;
    if (newPosition >= -maxSlide && newPosition <= maxSlide) {
        element.style.transform = `translateX(${newPosition}px)`;
    }
});

垂直滑动实现

修改代码实现垂直方向滑动：

element.addEventListener('touchmove', (e) => {
    const moveY = e.touches[0].clientY - startY;
    element.style.transform = `translateY(${moveY}px)`;
});

标签: js