移动端touchmove事件失效如何修复？附滚动翻页实现代码

你的代码存在几个核心问题导致移动端触摸翻页失效：

1. 重复声明了mHtml和page变量，覆盖了之前的定义，导致逻辑混乱
2. 移动端触摸事件无法通过deltaY获取滑动方向，需要通过记录触摸起始位置与当前位置的差值来判断
3. 触摸事件的逻辑未正确处理滑动方向的判断逻辑

以下是修复后的完整代码：

// 统一初始化变量
var mHtml = $("html");
var page = 1;
var startY = 0; // 记录触摸起始Y坐标

// 初始化滚动到顶部
mHtml.animate({scrollTop: 0}, 10);

// 桌面端wheel事件处理
window.addEventListener("wheel", function(e) {
    e.preventDefault();
}, {passive: false});

$(window).on("wheel", function(e) {
    if (mHtml.is(":animated")) return;
    
    if (e.originalEvent.deltaY > 0) {
        if (page >= 4) return;
        page++;
    } else if (e.originalEvent.deltaY < 0) {
        if (page <= 1) return;
        page--;
    }
    
    var posTop = (page - 1) * $(window).height();
    mHtml.animate({scrollTop: posTop});
});

// 移动端触摸事件处理
window.addEventListener("touchstart", function(e) {
    // 记录触摸开始的Y坐标
    startY = e.touches[0].clientY;
}, {passive: true});

window.addEventListener("touchmove", function(e) {
    e.preventDefault();
}, {passive: false});

$(window).on("touchmove", function(e) {
    if (mHtml.is(":animated")) return;
    
    var moveY = e.touches[0].clientY;
    var diffY = startY - moveY; // 计算滑动差值
    
    // 下滑（手指向上滑，页面向下翻页）
    if (diffY > 50) { // 增加阈值，避免误触
        if (page >= 4) return;
        page++;
        startY = moveY; // 更新起始位置，避免连续触发
        var posTop = (page - 1) * $(window).height();
        mHtml.animate({scrollTop: posTop});
    } 
    // 上滑（手指向下滑，页面向上翻页）
    else if (diffY < -50) {
        if (page <= 1) return;
        page--;
        startY = moveY;
        var posTop = (page - 1) * $(window).height();
        mHtml.animate({scrollTop: posTop});
    }
});

关键修复点说明：

• 统一了全局变量，避免重复声明覆盖
• 添加touchstart事件记录触摸起始位置，通过touchmove计算滑动差值判断方向
• 设置了50px的滑动阈值，避免轻微触摸导致的误翻页
• 在触发翻页后更新startY，防止一次滑动触发多次翻页

内容的提问来源于stack exchange，提问作者korean20