滚动监听

根据滚动位置自动更新 Bootstrap 导航或列表组组件，以指示当前在视口中处于活动状态的链接。

本页目录

它是如何工作的

滚动监听切换 .active 关于锚点的类 (<a>) 元素当具有该元素时 id 被锚点引用的 href 被滚动到视图中。Scrollspy 最好与 Bootstrap 一起使用导航组件或者列表组，但它也能与当前页面中的任何锚点元素一起使用。下面是它的工作原理。

首先，scrollspy 需要两样东西：导航、列表组或一组简单的链接，以及一个可滚动的容器。可滚动的容器可以是 <body> 或者具有设置了 height 和 overflow-y: scroll 的自定义元素。
在可滚动的容器上，添加 data-bs-spy="scroll" 和 data-bs-target="#navId"，其中 navId 是关联导航的唯一 id。如果元素内部没有可聚焦元素，请确保同时包含一个 tabindex="0" 以确保键盘访问。
随着你滚动“被监视”的容器，一个 .active 类会被添加到关联导航中的锚链接上，并在滚动离开时移除。链接必须有可解析的 id 目标，否则会被忽略。例如，<a href="#home">home</a> 必须对应 DOM 中的某个元素，例如 <div id="home"></div>
不可见的目标元素将被忽略。请参阅下面的不可见的元素部分。

示例

向下滚动导航栏下方的区域，并观察活动类的变化。打开下拉菜单，并观察下拉菜单项也被高亮显示。

第一标题

这是滚动监视页面的一些占位内容。请注意，当你向下滚动页面时，相应的导航链接会被高亮显示。这在整个组件示例中反复出现。我们在这里继续添加一些示例文本，以强调滚动和高亮显示。

第二个标题

这是滚动监视页面的一些占位内容。请注意，当你向下滚动页面时，相应的导航链接会被高亮显示。这在整个组件示例中反复出现。我们在这里继续添加一些示例文本，以强调滚动和高亮显示的效果。

第三个标题

这是滚动监视页面的一些占位内容。请注意，当你向下滚动页面时，相应的导航链接会被高亮显示。这在整个组件示例中反复出现。我们在这里继续添加一些示例文本以强调滚动和高亮显示。

第四标题

第五标题

<nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading1">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading2">Second</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
        <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
      </ul>
    </li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0">
  <h4 id="scrollspyHeading1">First heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading2">Second heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading3">Third heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading4">Fourth heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading5">Fifth heading</h4>
  <p>...</p>
</div>