滚动事件添加返回历史项问题（除Edge/Brave外已解决）

问题清单 #

• 自研滚动监听方案：Firefox中稳定生效，Chrome中偶尔出现异常，初步怀疑是pushState重复添加历史记录项导致
• 第三方滚动监听示例功能缺口：已实现菜单点击平滑滚动至对应区域、滚动时更新URL，但滚动触发URL变更后点击浏览器返回按钮，会直接跳转至上一页而非前一滚动区域（菜单点击触发的URL变更可正常返回）

第三方示例依赖安装 #

需先执行以下命令安装依赖：

npm install --save sanitize.css
npm install --save intersection-observer

问题修复步骤 #

1. Chrome中pushState异常排查与修复 #

• 打开Chrome开发者工具的Application > History面板，实时监控滚动/操作时历史记录的新增情况，确认是否存在重复条目
• 给pushState添加前置校验：仅当目标hash与当前URL的hash不一致时，才执行添加操作，示例逻辑：

  const currentHash = window.location.hash;
  const targetHash = `#${targetElementId}`;
  if (currentHash !== targetHash) {
    window.history.pushState({ id: targetElementId }, '', targetHash);
  }
  

• 对滚动事件回调添加防抖处理，避免因Chrome中滚动事件高频触发导致pushState调用过于频繁：

  function debounce(func, delay = 100) {
    let timeoutId;
    return (...args) => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
  }
  
  // 用防抖包裹滚动监听回调
  window.addEventListener('scroll', debounce(handleScroll));
  

2. 修复返回按钮跳转逻辑 #

问题核心：滚动触发URL变更时，仅调用pushState添加了历史条目，但未监听popstate事件处理返回动作，导致浏览器执行默认跳转。需添加以下逻辑：

// 监听浏览器返回/前进事件
window.addEventListener('popstate', (event) => {
  if (event.state?.id) {
    const targetElement = document.getElementById(event.state.id);
    if (targetElement) {
      // 平滑滚动到目标区域
      targetElement.scrollIntoView({ behavior: 'smooth' });
      // 同步更新菜单激活状态（按需添加）
      document.querySelectorAll('.menu-link').forEach(link => {
        link.classList.remove('active');
        if (link.getAttribute('href') === `#${event.state.id}`) {
          link.classList.add('active');
        }
      });
    }
  }
});

// 修改滚动触发URL更新的逻辑，确保存入正确的state数据
function updateUrlOnScroll(targetId) {
  const targetHash = `#${targetId}`;
  if (window.location.hash !== targetHash) {
    window.history.pushState({ id: targetId }, '', targetHash);
  }
}

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