Bootstrap 5 Scrollspy滚动监听激活功能失效问题求助

核心问题点 #

• 调用方法不兼容：Bootstrap 5 已移除默认jQuery依赖，你使用的$('body').scrollspy()是Bootstrap 4及更早版本的jQuery调用语法，在Bootstrap 5环境下无法生效。同时如果你已经通过data-bs-spy属性做自动初始化，就不需要额外写JS初始化代码，两种初始化方式二选一即可，不要混用。
• 重复绑定冲突：你同时给<body>和内部div.scrollspy-example添加了Scrollspy相关监听属性，两个监听逻辑冲突导致功能异常。Scrollspy要求唯一指定滚动监听的容器，如果你用全局页面滚动，监听对象为<body>，就不需要给内部div加data-bs-spy属性。
• 监听元素无有效高度：你代码里的所有<section>都是空标签，没有设置高度，滚动时无法触发元素进入视口的检测逻辑，自然不会激活对应导航。需要给每个section设置足够的高度，比如min-height: 100vh保证单屏展示。
• 旧版属性未适配：Bootstrap 5所有组件的自定义属性都统一加了bs-前缀，你给<body>添加的data-target是旧版语法，需要改为data-bs-target才能被正确识别。

修复后可用代码 #

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* 给section设置足够高度，确保可滚动触发检测 */
    section {
      min-height: 100vh;
      padding-top: 80px; /* 避开fixed-top导航的高度，避免内容被导航遮挡 */
    }
  </style>
</head>
<body data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0">
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3 fixed-top">
      <a class="navbar-brand" href="#">Navbar</a>
      <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link" href="#scrollspyHeading1">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#scrollspyHeading2">About Me</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#scrollspyHeading3">Skills</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#scrollspyHeading4">My Project</a>
        </li>
      </ul>
    </nav>
    
    <div class="container">
      <section id="scrollspyHeading1">
        <h2>Home</h2>
      </section>
      <section id="scrollspyHeading2">
        <h2>About Me</h2>
      </section>
      <section id="scrollspyHeading3">
        <h2>Skills</h2>
      </section>
      <section id="scrollspyHeading4">
        <h2>My Project</h2>
      </section>
    </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

如果你需要用JS手动初始化，使用Bootstrap 5原生JS语法即可：

const scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example2',
  offset: 0
})

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