Bootstrap 5中ScrollSpy因Collapse展开功能异常的修复问询

核心原因 #

手动给导航链接添加的active类会和ScrollSpy自动生成的active类冲突，再加上Collapse展开/收起后页面内容高度变化，ScrollSpy没有实时重新计算锚点位置，最终导致追踪逻辑混乱。

解决方案 #

1. 让ScrollSpy全权管理active类（推荐）

直接移除手动添加的active类，让ScrollSpy自动处理初始和滚动时的active状态：

• 若通过HTML属性初始化ScrollSpy，确保导航容器与锚点目标配置正确，页面加载后ScrollSpy会自动检测当前视口位置，给对应导航项加上active类。
• 若通过JS初始化，代码示例：

const scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#your-nav-container-id' // 替换为你的导航容器ID
})

2. Collapse切换时强制刷新ScrollSpy

如果需要保留特定场景下的手动active设置，可以在Collapse展开/收起后强制刷新ScrollSpy，让它重新计算页面布局：

// 给所有Collapse组件绑定状态切换事件
document.querySelectorAll('.collapse').forEach(el => {
  // 展开完成后刷新ScrollSpy
  el.addEventListener('shown.bs.collapse', () => {
    const spyInstance = bootstrap.ScrollSpy.getInstance(document.body);
    spyInstance && spyInstance.refresh();
  });
  // 收起完成后刷新ScrollSpy
  el.addEventListener('hidden.bs.collapse', () => {
    const spyInstance = bootstrap.ScrollSpy.getInstance(document.body);
    spyInstance && spyInstance.refresh();
  });
});

3. 手动同步active类与ScrollSpy状态（进阶）

若必须手动设置初始active项，可在ScrollSpy初始化完成后，手动触发一次滚动检测，避免手动类与自动类冲突：

const scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#your-nav-container-id'
});
// 模拟滚动事件，让ScrollSpy重新计算当前位置并更新active状态
window.dispatchEvent(new Event('scroll'));

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