滚动监听 · Bootstrap 6.0 中文文档

它是如何工作的

滚动监听切换 .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>
不可见的目标元素将被忽略。请参阅不可见元素下面的部分。
目标 id与……匹配 getElementById，所以包含特殊字符或百分号编码字符的 ID（例如 #item.1, #section:overview，或者 #%2Fpath) 正确解决。

检测

Scrollspy 使用一个 IntersectionObserver 来跟踪各个部分，而无需 scroll-position 轮询。检测是确定性的，并完全由靠近滚动容器顶部的激活线驱动。

活动部分是顶部已经滚动过激活线的最深部分，就像你当前正在阅读的部分一样。
在两个标题之间的间隙滚动时，最后激活的部分保持激活状态，直到下一个部分越过该线。
在容器的最顶部，在任何部分越过该线之前，第一个部分保持激活状态。
在容器的最底部，即使最后一个部分的顶部从未达到该线，也会被激活（对短的最后一部分非常有用）。

通过 topMargin 设置激活线的位置（更用户友好的值 % 或 px 从滚动根顶部开始，例如 96px 以位于固定导航栏下方），或使用原始 IntersectionObserver rootMargin 字符串完全控制。请参见选项。

跳转到调试覆盖层部分，以可视化激活行的实际效果。

示例

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

第一标题

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

第二个标题

第三个标题

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

第四标题

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

第五标题

HTML

          <nav id="navbar-example2" class="navbar bg-1 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">
      <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>
      <div class="menu">
        <a class="menu-item" href="#scrollspyHeading3">Third</a>
        <a class="menu-item" href="#scrollspyHeading4">Fourth</a>
        <hr class="menu-divider">
        <a class="menu-item" href="#scrollspyHeading5">Fifth</a>
      </div>
    </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-1 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>