移动端触摸页面时停止自动滚动动画的实现求助

我们可以通过添加移动端触摸事件监听，结合jQuery的stop()方法实现触摸时终止滚动动画的需求。修改后的完整代码如下：

// 封装循环滚动逻辑
const autoScroll = function() {
  $('html, body').animate(
    { scrollTop: $(document).height() - $(window).height() },
    12000,
    function() {
      $(this).animate({ scrollTop: 0 }, 12000, autoScroll);
    }
  );
};

// 启动自动滚动
autoScroll();

// 监听移动端触摸事件，停止动画
$(document).on('touchstart', function() {
  // 清空动画队列并停在当前位置
  $('html, body').stop(true, false);
});

关键改动说明： #

• 重构滚动逻辑为递归函数：把滚动逻辑封装成autoScroll，让滚动到页面底部后能自动触发回滚到顶部的动画，保持循环效果。
• 添加触摸事件监听：绑定touchstart事件（移动端触摸屏幕的初始触发事件），调用stop(true, false)终止动画：
  • 第一个参数true：清空所有待执行的动画队列，确保后续的反向滚动也会被终止
  • 第二个参数false：让动画停在当前滚动位置，而非直接跳到动画终点
• 全局事件绑定：将触摸事件绑定到document，确保触摸页面任意区域都能触发停止操作

可选扩展： #

如果需要支持桌面端点击停止动画，可额外添加点击事件监听：

$(document).on('click', function() {
  $('html, body').stop(true, false);
});

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