Chrome扩展页面平滑滚动停止后无法重新启动问题排查与方案求解

• 变量重复声明报错：首次注入滚动代码时使用const t声明了块级作用域的定时器变量，第二次触发启动逻辑时，同作用域下重复用const声明同名变量会直接抛出语法错误，后续滚动代码完全不会执行。
• 滚动初始值逻辑错误：每次启动滚动时偏移量x都从1开始计算，如果页面已经有滚动距离，window.scroll(0, x)会先把页面拉回顶部附近，用户会误以为功能失效；如果页面已经接近底部，启动后会立刻触发底部判定条件，直接清除定时器，看不到滚动效果。
• 依赖jQuery存在兼容问题：原代码使用$调用jQuery方法判断滚动位置，如果运行站点没有引入jQuery，代码会直接执行报错。

调整后代码如下，可支持反复启停、不依赖第三方库、从当前滚动位置继续滚动：

if(request.doScroll){
  chrome.tabs.executeScript(sender.tab.id, {
    code:`
      // 启动前先清空已有定时器，避免多实例同时运行
      if(window.autoScrollTimer) clearInterval(window.autoScrollTimer);
      // 初始偏移量取当前页面已滚动高度，从当前位置继续滚动
      let scrollOffset = window.scrollY || document.documentElement.scrollTop;
      const delay = 1; // 滚动间隔毫秒数
      // 定时器挂载到window全局对象，避免重复声明问题，方便启停调用
      window.autoScrollTimer = setInterval(()=> {
        window.scroll(0, scrollOffset);
        scrollOffset += 5; // 数值越大滚动速度越快

        // 原生JS实现底部判定，无依赖
        const scrollTop = window.scrollY || document.documentElement.scrollTop;
        const windowHeight = window.innerHeight || document.documentElement.clientHeight;
        const docHeight = document.documentElement.scrollHeight;
        if(scrollTop + windowHeight > docHeight - 100) {
          console.log("滚动到底部，清除定时器");
          clearInterval(window.autoScrollTimer);
          window.autoScrollTimer = null;
        }
      }, delay);
    `
  });
}else{
  chrome.tabs.executeScript(sender.tab.id, {
    code: `
      // 停止滚动时清除全局定时器
      if(window.autoScrollTimer) {
        clearInterval(window.autoScrollTimer);
        window.autoScrollTimer = null;
      }
    `
  });
}

核心调整点 #

• 定时器ID挂载到window全局属性上，彻底避免const重复声明报错问题，启停逻辑都可以直接访问到同一个定时器实例。
• 每次启动前先清空已存在的定时器，防止多个滚动实例同时运行导致速度异常。
• 滚动初始偏移量取当前页面的滚动高度，重启滚动时会从当前位置继续向下，不会跳回顶部。
• 所有DOM操作替换为原生JS实现，不需要依赖jQuery，兼容所有站点。
• 定时器清除后同步将全局属性置为null，方便状态校验。

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