以下是如何在 Bootstrap 5 中使用 滚动监听（Scrollspy） 的完整指南，我会在内容中加入出站链接，以帮助您进一步学习和参考。

Bootstrap 5 滚动监听（Scrollspy）指南

什么是 Scrollspy

Scrollspy 是 Bootstrap 5 的一个插件，可以在用户滚动页面时，自动更新导航栏或列表组中的高亮状态。它通过监听滚动事件，根据内容区域的 id 来激活对应的导航项，帮助用户快速定位当前浏览区域。

出站链接：查看 Bootstrap 5 Scrollspy 官方文档。

基本使用

HTML 结构

Scrollspy 需要一个导航组件和一个可滚动的内容区域。以下是一个简单示例：

<!-- 导航栏 -->
<nav id="navbar-example" class="navbar navbar-light bg-light">
  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link" href="#section1">Section 1</a></li>
    <li class="nav-item"><a class="nav-link" href="#section2">Section 2</a></li>
  </ul>
</nav>

<!-- 内容区域 -->
<div data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="0" tabindex="0" style="height: 300px; overflow-y: scroll;">
  <h4 id="section1">Section 1</h4>
  <p>这里是第一部分的内容...</p>
  <h4 id="section2">Section 2</h4>
  <p>这里是第二部分的内容...</p>
</div>

属性说明

  • data-bs-spy="scroll"：启用 Scrollspy 功能。
  • data-bs-target：指定导航栏的 id 或类名，用于关联导航和内容。
  • data-bs-offset：设置滚动偏移量（可选），调整高亮触发的时机。
  • tabindex="0"：提升可访问性，支持键盘导航。

CSS 要求

  • 内容区域需设置固定高度，例如 height: 300px。
  • 必须启用滚动条，使用 overflow-y: scroll。

高级用法

与导航栏集成

Scrollspy 可以与 Bootstrap 的导航栏结合，支持响应式设计：

<nav id="navbar-example" class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#section1">Section 1</a></li>
        <li class="nav-item"><a class="nav-link" href="#section2">Section 2</a></li>
      </ul>
    </div>
  </div>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="0" tabindex="0" style="height: 300px; overflow-y: scroll;">
  <h4 id="section1">Section 1</h4>
  <p>内容...</p>
  <h4 id="section2">Section 2</h4>
  <p>内容...</p>
</div>

出站链接：了解更多关于 Bootstrap 5 导航栏 的内容。

与列表组结合

Scrollspy 也可用于侧边导航，与列表组搭配：

<div class="row">
  <div class="col-4">
    <div id="list-example" class="list-group">
      <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
      <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
    </div>
  </div>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" tabindex="0" style="height: 200px; overflow-y: scroll;">
      <h4 id="list-item-1">Item 1</h4>
      <p>内容...</p>
      <h4 id="list-item-2">Item 2</h4>
      <p>内容...</p>
    </div>
  </div>
</div>

出站链接：参考 Bootstrap 5 列表组 官方文档。

JavaScript 控制

通过 JavaScript 可以手动初始化 Scrollspy：

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

出站链接：查看 Bootstrap 5 JavaScript API。

注意事项

  • 内容区域需为相对定位（position: relative），<div> 默认满足。
  • 导航项的 href 必须与内容区域的 id 一致。
  • 确保内容区域有滚动条，否则 Scrollspy 无法工作。

参考资源

以下是一些外部资源，供您深入学习：

总结

Bootstrap 5 的 Scrollspy 是一个强大的工具，可以通过简单的配置集成到导航栏或列表组中，提升用户体验。如需更多帮助，请随时提问！