Bootstrap V5.3 : Scrollspy 滚动监听中文翻译版

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

运作方式

当具有锚点引用的元素滚动到视图中时，Scrollspy 会切换锚点（）元素上的类。Scrollspy 最好与 Bootstrap 导航组件或列表组结合使用，但它也可以与当前页面中的任何锚元素一起使用。这是它的工作原理。.active<a>idhref

首先，scrollspy 需要两件事：导航、列表组或一组简单的链接，以及一个可滚动的容器。可滚动容器可以是带有集合和的自定义元素或。<body>heightoverflow-y: scroll
在可滚动容器上，添加和 where 是关联导航的唯一值。如果元素内没有可聚焦的元素，请务必同时包含以确保键盘访问。data-bs-spy="scroll"data-bs-target="#navId"navIdidtabindex="0"
当您滚动“间谍”容器时，会在关联导航中的锚链接中添加和删除一个类。链接必须具有可解析的目标，否则将被忽略。例如，a 必须对应于 DOM 中的内容，例如.activeid<a href="#home">home</a><div id="home"></div>
不可见的目标元素将被忽略。请参阅下面的不可见元素部分。

例子

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

第一个标题

这是 scrollspy 页面的一些占位符内容。请注意，当您向下滚动页面时，相应的导航链接将突出显示。在整个组件示例中重复此作。我们在这里不断添加更多示例副本，以强调滚动和突出显示。

第二标题

第三个标题

第四个标题

第五个标题

<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>