Bootstrap5 滚动监听(Scrollspy)

Bootstrap5是许多web开发者喜爱的前端框架之一，它提供了许多可自定义的组件和实用工具，其中之一就是滚动监听(Scrollspy)。

滚动监听是一种可实现在滚动时自动高亮页面导航菜单项的技术。使用此功能，用户可以通过滚动页面在导航菜单中选择所需的部分，而不需要手动查找。在Bootstrap5中，您可以通过将data-bs-spy属性添加到需要触发滚动监听的元素中来实现此目的。

实现滚动监听的基本结构如下:

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#overview">Overview</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#usage">Usage</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#methods">Methods</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#events">Events</a>
    </li>
  </ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0">
  <h4 id="overview">Overview</h4>
  <p>...</p>
  <h4 id="usage">Usage</h4>
  <p>...</p>
  <h4 id="methods">Methods</h4>
  <p>...</p>
  <h4 id="events">Events</h4>
  <p>...</p>
</div>

在这个示例中，nav元素是使用Bootstrap5的navbar组件构建的简单导航菜单。data-bs-target属性将滚动监听定位到id为navbar-example2的nav元素上。data-bs-spy属性告诉Bootstrap5启用滚动监听。data-bs-offset属性设置滚动偏移量，可用于在滚动时调整启动滚动监听的位置。

滚动的目标元素应包含一个ID，以便滚动监听可以注册并为其创建对应的导航菜单。在示例中，各部分都由ID定义:overview、usage、methods和events。

在滚动监听触发后，Bootstrap5自动将与nav中的链接匹配的活动部分标记为活动状态。因此，选中的部分将高亮显示。

在这里，我们提供了一个非常基础的滚动监听示例，您可以在您的Bootstrap5项目中使用这个示例作为基本模板，随后按照您的需求进行自定义开发。滚动监听功能可以让页面更具可用性和易用性，能够帮助许多web开发者更好地为其网站访问者服务。