当前位置：首页 > JavaScript

js实现手机滑动效果

2026-01-30 17:40:53JavaScript

实现基础滑动效果

使用touchstart、touchmove和touchend事件监听触摸操作：

let startX, moveX;
const slider = document.querySelector('.slider');

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

slider.addEventListener('touchmove', (e) => {
    moveX = e.touches[0].clientX - startX;
    // 阻止默认滚动行为
    e.preventDefault();
    // 实时更新元素位置
    slider.style.transform = `translateX(${moveX}px)`;
});

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

添加惯性滑动效果

通过计算滑动速度和方向实现惯性效果：

js实现手机滑动效果

let startTime, velocity;
const threshold = 50; // 滑动判定阈值

slider.addEventListener('touchmove', (e) => {
    const currentTime = Date.now();
    const deltaX = e.touches[0].clientX - startX;
    velocity = deltaX / (currentTime - startTime);
    startTime = currentTime;
});

slider.addEventListener('touchend', () => {
    const distance = velocity * 100; // 根据速度计算惯性距离
    if (Math.abs(distance) > threshold) {
        slider.style.transition = 'transform 0.5s ease-out';
        slider.style.transform = `translateX(${distance}px)`;
    }
});

限制滑动边界

防止元素滑出可视区域：

js实现手机滑动效果

const maxSlide = 200; // 最大滑动距离

slider.addEventListener('touchmove', (e) => {
    const currentX = e.touches[0].clientX - startX;
    if (Math.abs(currentX) > maxSlide) {
        return;
    }
    slider.style.transform = `translateX(${currentX}px)`;
});

使用CSS优化性能

添加硬件加速和过渡效果：

.slider {
    will-change: transform;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

完整示例代码

整合所有功能的实现：

class TouchSlider {
    constructor(element) {
        this.el = element;
        this.startX = 0;
        this.currentX = 0;
        this.velocity = 0;
        this.lastTime = 0;
        this.isDragging = false;
        this.setupEvents();
    }

    setupEvents() {
        this.el.addEventListener('touchstart', this.handleStart.bind(this));
        this.el.addEventListener('touchmove', this.handleMove.bind(this));
        this.el.addEventListener('touchend', this.handleEnd.bind(this));
    }

    handleStart(e) {
        this.isDragging = true;
        this.startX = e.touches[0].clientX;
        this.currentX = this.getTranslateX();
        this.lastTime = Date.now();
    }

    handleMove(e) {
        if (!this.isDragging) return;
        e.preventDefault();

        const x = e.touches[0].clientX;
        const deltaX = x - this.startX;
        const now = Date.now();
        const deltaTime = now - this.lastTime;

        this.velocity = deltaX / deltaTime;
        this.lastTime = now;

        this.setTranslateX(this.currentX + deltaX);
    }

    handleEnd() {
        this.isDragging = false;
        const momentum = this.velocity * 100;

        this.el.style.transition = 'transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1)';
        this.setTranslateX(this.getTranslateX() + momentum);

        setTimeout(() => {
            this.el.style.transition = '';
        }, 500);
    }

    getTranslateX() {
        const transform = window.getComputedStyle(this.el).transform;
        if (transform === 'none') return 0;
        return parseInt(transform.split(',')[4].trim());
    }

    setTranslateX(x) {
        this.el.style.transform = `translateX(${x}px)`;
    }
}

// 初始化
new TouchSlider(document.querySelector('.slider'));