求助：点击暂停/恢复页面自动滚动功能失效（附JS代码）

你的代码有几个关键问题导致功能失效，下面逐一说明并给出修正后的完整代码：

主要问题点 #

• 点击事件里错误使用了未定义的scroll变量，应该用你声明的paused状态变量来判断
• stopScroll函数不需要返回值，但你把它的返回值赋值给了scrollerId，会导致后续恢复滚动时变量异常
• 缺少滚动到页面底部时自动停止的判断逻辑

修正后的完整代码 #

let scrollerId;
let paused = false; // 初始状态设为未暂停，页面加载后自动开始滚动

// 启动滚动函数，增加底部判断逻辑
function startScroll() {
  return setInterval(() => {
    // 判断是否已滚动到页面底部
    const isAtBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight;
    if (isAtBottom) {
      clearInterval(scrollerId);
      return;
    }
    window.scrollBy(0, 2);
  }, 10);
}

// 停止滚动函数
function stopScroll() {
  clearInterval(scrollerId);
}

// 页面加载完成后启动滚动
scrollerId = startScroll();

// 点击页面切换暂停/恢复状态
document.body.addEventListener("click", () => {
  if (paused) {
    // 当前处于暂停状态，恢复滚动
    scrollerId = startScroll();
    paused = false;
  } else {
    // 当前处于滚动状态，暂停滚动
    stopScroll();
    paused = true;
  }
});

代码说明 #

• 调整paused初始值为false，确保页面加载后自动启动滚动
• 在startScroll的定时器中增加底部判断：通过视口高度+已滚动距离与页面总高度的对比，判断是否到达底部，到达后自动清除定时器停止滚动
• 点击事件中正确使用paused变量判断当前状态，切换时执行对应的启动/停止逻辑，避免变量赋值错误

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