移动端JavaScript滑动仅生效一次问题技术求助

嘿，我找到问题的根源了！你这段代码里有个很容易踩的小坑——classList方法的链式调用错误。

你看，classList.add()和classList.remove()这两个方法是没有返回值的（准确说返回undefined），所以当你写element.classList.add("down-scroll").remove("up-scroll")的时候，执行完add后拿到的是undefined，再去调用remove就会直接抛出错误，导致后面的xDown = null; yDown = null;重置代码根本没机会运行。第一次滑动后，变量没被正确重置，后续的滑动判断自然就失效了。

下面是修复后的完整代码，主要把链式调用拆成了单独语句，还加了可选的阻止默认滚动行为的代码，避免浏览器原生滚动和自定义滑动冲突：

window.addEventListener('touchstart', handleTouchStart, false);
window.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;
var yDown = null;

function handleTouchStart(evt) {
    xDown = evt.touches[0].clientX;
    yDown = evt.touches[0].clientY;
};

function handleTouchMove(evt) {
    if (!xDown || !yDown) {
        return;
    }

    var xUp = evt.touches[0].clientX;
    var yUp = evt.touches[0].clientY;

    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;

    // 可选：阻止浏览器默认滚动行为，避免和自定义滑动冲突
    evt.preventDefault();

    if (Math.abs(xDiff) > Math.abs(yDiff)) {
        /* 左右滑动逻辑 */
        if (xDiff > 0) {
            // 左滑操作
        } else {
            // 右滑操作
        }
    } else {
        var element = document.getElementById("background");
        if (yDiff > 0) {
            // 拆分为单独调用，避免链式错误
            element.classList.add("down-scroll");
            element.classList.remove("up-scroll");
        } else {
            element.classList.add("up-scroll");
            element.classList.remove("down-scroll");
        }
    }

    /* 重置变量，确保下次滑动能正常触发 */
    xDown = null;
    yDown = null;
};

另外，建议你打开浏览器开发者工具的控制台（按F12），就能看到第一次滑动时抛出的Cannot read properties of undefined (reading 'remove')错误，这是排查前端问题的常用小技巧哦。

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