Bootstrap 5.1.3中activate.bs.scrollspy事件无法触发如何解决？

1. Bootstrap 5调整了Scrollspy的事件冒泡规则：activate.bs.scrollspy事件仅会触发在绑定了data-bs-spy="scroll"的滚动监听容器上（你这里就是body元素），不会向上冒泡到window，这是和Bootstrap 4最核心的差异，所以你之前绑定window的写法直接失效。
2. 事件触发对象错误：该事件不会触发在导航容器#scroll-spy-nav上，绑定到该元素的回调自然不会执行。
3. 自动初始化时序问题：通过data-*属性自动初始化Scrollspy时，可能存在事件绑定晚于组件初始化的隐性时序问题，导致部分场景下事件监听不到。

推荐用手动初始化Scrollspy的方式，稳定性更高，步骤如下：

1. 先移除body上的data-bs-spy="scroll"、data-bs-target="#scroll-spy-nav"、data-bs-offset="0"这三个自动初始化相关的属性，保留position: relative和tabindex="0"即可。
2. 用以下代码手动初始化并绑定事件：

$(() => {
  // 手动初始化Scrollspy
  const scrollSpy = new bootstrap.ScrollSpy(document.body, {
    target: '#scroll-spy-nav',
    offset: 0
  })

  // 原生JS绑定写法
  document.body.addEventListener('activate.bs.scrollspy', function (e) {
    // e.detail.relatedTarget 为当前激活的导航项DOM元素
    console.log('激活项：', e.detail.relatedTarget)
  })

  // 如果用jQuery绑定也可以，二选一即可
  // $('body').on('activate.bs.scrollspy', function (ev, relatedTarget) {
  //   console.log('激活项：', relatedTarget)
  // })
})

如果不想改手动初始化，也可以直接保留原来的data属性配置，只保留body的事件绑定即可，删除其他无效的绑定代码，绝大多数场景下也可以正常触发。

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