Bootstrap5 Scrollspy本地失效 同代码Codeply正常求解

这类「代码复制到在线编辑器运行正常、部署到自有站点后.active类不动态切换」的问题，基本都是运行环境和编辑器默认环境的配置差异导致，按以下优先级排查即可：

• 滚动容器绑定错误（90%的场景都是这个问题）
  Bootstrap Scrollspy必须绑定到实际触发滚动事件的容器上才能生效。大部分在线前端编辑器会把示例代码放在无额外嵌套的iframe中，滚动事件直接在body上触发，所以把监听属性加在body上就能正常跑；但自有站点如果用了固定侧边栏+独立滚动主内容区、或者给内容层加了overflow: auto/scroll样式，滚动事件会被内层容器拦截，body根本接收不到滚动回调，自然不会更新导航的active状态。
  排查方法：打开浏览器控制台，分别给window、body、主内容区容器绑定scroll事件打印日志，滚动页面时能触发日志的元素，就是需要绑定data-bs-spy="scroll"和data-bs-target属性的正确监听容器。

• 初始化时机早于DOM渲染完成
  如果页面内容是客户端动态渲染的（包括前端框架异步拉取内容生成锚点、客户端路由切换注入页面内容），Bootstrap默认的页面加载时自动初始化逻辑，会在所有锚点元素生成前就完成Scrollspy实例创建，此时实例收集不到任何锚点信息，后续滚动自然不会触发状态更新。在线编辑器里所有代码是静态同步加载的，初始化时锚点已经全部存在，所以不会出问题。
  修复方法：等所有动态内容渲染完成后，手动初始化Scrollspy实例，内容更新后主动调用刷新方法重新计算锚点位置，参考代码：

  // 动态内容渲染完成后执行
  const scrollContainer = document.getElementById('实际滚动容器的ID')
  const scrollSpyInstance = new bootstrap.ScrollSpy(scrollContainer, {
    target: '#嵌套导航的ID',
    offset: 80 // 有固定顶部导航时填导航高度，避免位置计算偏移
  })
  // 后续如果内容动态变化、锚点位置改变，调用refresh重新计算
  scrollSpyInstance.refresh()
  

• 基础配置不符合组件要求

  • 被监听的滚动容器必须设置position: relative样式，否则锚点偏移量计算会完全出错
  • 所有导航链接href对应的页面锚点ID必须唯一，不能出现重名、拼写错误，锚点元素不能设置display: none
  • 嵌套导航的子菜单锚点必须放在对应父级锚点的内容区块内部，否则层级识别会失效

验证技巧：排查过程中可以在控制台执行bootstrap.ScrollSpy.getInstance(滚动容器DOM元素)，查看返回实例的_targets属性是否正确收集到了所有锚点，滚动页面时观察_activeTarget属性是否随滚动位置变化，就能快速定位是配置错误还是初始化逻辑问题。

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