Skip to main content Skip to docs navigation

滚动监听

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

怎么运行的

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

  • 首先,scrollspy 需要两件事:导航、列表组或一组简单的链接,以及一个可滚动的容器。可滚动容器可以是 the<body>或带有 setheight和的自定义元素overflow-y: scroll

  • 在可滚动容器上,添加关联导航data-bs-spy="scroll"data-bs-target="#navId"唯一navId性。id确保还包括一个tabindex="0"以确保键盘访问。

  • 当您滚动“spied”容器时,.active会在相关导航中的锚链接中添加和删除一个类。链接必须有可解析的id目标,否则它们将被忽略。例如,a<a href="#home">home</a>必须对应于 DOM 中的某些内容,例如<div id="home"></div>

  • 不可见的目标元素将被忽略。请参阅下面的不可见元素部分。

例子

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

第一个标题

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

第二标题

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

第三标题

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

第四个标题

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

第五标题

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

嵌套导航

Scrollspy 也适用于嵌套.navs。如果嵌套.nav.active,它的父母也将是.active。滚动导航栏旁边的区域并观察活动类的变化。

第 1 项

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

请记住,JavaScript 插件会尝试从所有可能可见的元素中选择正确的元素。同时存在多个可见的 scrollspy 目标可能会导致一些问题。

项目 1-1

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

请记住,JavaScript 插件会尝试从所有可能可见的元素中选择正确的元素。同时存在多个可见的 scrollspy 目标可能会导致一些问题。

第 1-2 项

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

请记住,JavaScript 插件会尝试从所有可能可见的元素中选择正确的元素。同时存在多个可见的 scrollspy 目标可能会导致一些问题。

第 2 项

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

请记住,JavaScript 插件会尝试从所有可能可见的元素中选择正确的元素。同时存在多个可见的 scrollspy 目标可能会导致一些问题。

第 3 项

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

请记住,JavaScript 插件会尝试从所有可能可见的元素中选择正确的元素。同时存在多个可见的 scrollspy 目标可能会导致一些问题。

项目 3-1

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

请记住,JavaScript 插件会尝试从所有可能可见的元素中选择正确的元素。同时存在多个可见的 scrollspy 目标可能会导致一些问题。

项目 3-2

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

请记住,JavaScript 插件会尝试从所有可能可见的元素中选择正确的元素。同时存在多个可见的 scrollspy 目标可能会导致一些问题。

<div class="row">
  <div class="col-4">
    <nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
      <nav class="nav nav-pills flex-column">
        <a class="nav-link" href="#item-1">Item 1</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
          <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
        </nav>
        <a class="nav-link" href="#item-2">Item 2</a>
        <a class="nav-link" href="#item-3">Item 3</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
          <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
        </nav>
      </nav>
    </nav>
  </div>

  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
      <div id="item-1">
        <h4>Item 1</h4>
        <p>...</p>
      </div>
      <div id="item-1-1">
        <h5>Item 1-1</h5>
        <p>...</p>
      </div>
      <div id="item-1-2">
        <h5>Item 1-2</h5>
        <p>...</p>
      </div>
      <div id="item-2">
        <h4>Item 2</h4>
        <p>...</p>
      </div>
      <div id="item-3">
        <h4>Item 3</h4>
        <p>...</p>
      </div>
      <div id="item-3-1">
        <h5>Item 3-1</h5>
        <p>...</p>
      </div>
      <div id="item-3-2">
        <h5>Item 3-2</h5>
        <p>...</p>
      </div>
    </div>
  </div>
</div>

列表组

Scrollspy 也适用于.list-groups。滚动列表组旁边的区域并观察活动类的变化。

第 1 项

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

第 2 项

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

第 3 项

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

第 4 项

这是 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>
      <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
      <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
    </div>
  </div>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
      <h4 id="list-item-1">Item 1</h4>
      <p>...</p>
      <h4 id="list-item-2">Item 2</h4>
      <p>...</p>
      <h4 id="list-item-3">Item 3</h4>
      <p>...</p>
      <h4 id="list-item-4">Item 4</h4>
      <p>...</p>
    </div>
  </div>
</div>

简单的锚点

Scrollspy 不限于导航组件和列表组,因此它适用于<a>当前文档中的任何锚元素。滚动该区域并观察.active班级变化。

第 1 项

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

第 2 项

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

第 3 项

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

第 4 项

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

第 5 项

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

<div class="row">
  <div class="col-4">
    <div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
      <a class="p-1 rounded" href="#simple-list-item-1">Item 1</a>
      <a class="p-1 rounded" href="#simple-list-item-2">Item 2</a>
      <a class="p-1 rounded" href="#simple-list-item-3">Item 3</a>
      <a class="p-1 rounded" href="#simple-list-item-4">Item 4</a>
      <a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
    </div>
  </div>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
      <h4 id="simple-list-item-1">Item 1</h4>
      <p>...</p>
      <h4 id="simple-list-item-2">Item 2</h4>
      <p>...</p>
      <h4 id="simple-list-item-3">Item 3</h4>
      <p>...</p>
      <h4 id="simple-list-item-4">Item 4</h4>
      <p>...</p>
      <h4 id="simple-list-item-5">Item 5</h4>
      <p>...</p>
    </div>
  </div>
</div>

不可见元素

不可见的目标元素将被忽略,并且它们相应的导航项将不会接收.active类。在不可见包装器中初始化的 Scrollspy 实例将忽略所有目标元素。一旦包装器变得可见,使用该refresh方法检查可观察元素。

document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
  el.addEventListener('shown.bs.tab', () => {
    const target = el.getAttribute('data-bs-target')
    const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
    bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
  })
})

用法

通过数据属性

要轻松地将 scrollspy 行为添加到您的顶部栏导航,请添加data-bs-spy="scroll"到您要监视的元素(最典型的是<body>)。然后使用任何 Bootstrap组件的父元素的类名或类名添加data-bs-target属性。id.nav

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

通过 JavaScript

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

选项

As options can be passed via data attributes or JavaScript, you can append an option name to data-bs-, as in data-bs-animation="{value}". Make sure to change the case type of the option name from “camelCase” to “kebab-case” when passing the options via data attributes. For example, use data-bs-custom-class="beautifier" instead of data-bs-customClass="beautifier".

As of Bootstrap 5.2.0, all components support an experimental reserved data attribute data-bs-config that can house simple component configuration as a JSON string. When an element has data-bs-config='{"delay":0, "title":123}' and data-bs-title="456" attributes, the final title value will be 456 and the separate data attributes will override values given on data-bs-config. In addition, existing data attributes are able to house JSON values like data-bs-delay='{"show":0,"hide":150}'.

Name Type Default Description
rootMargin string 0px 0px -25% Intersection Observer rootMargin有效单位,计算滚动位置时。
smoothScroll 布尔值 false 当用户单击引用 ScrollSpy 可观察对象的链接时启用平滑滚动。
target 字符串,DOM 元素 null 指定要应用 Scrollspy 插件的元素。
threshold 大批 [0.1, 0.5, 1] IntersectionObserver 计算滚动位置时的阈值有效输入。

弃用的选项

在 v5.1.3 之前,我们一直在使用offset&method选项,现在已弃用并替换为rootMargin. 为了保持向后兼容性,我们将继续解析给定offset的 to rootMargin,但此功能将在v6中删除。

方法

方法 描述
dispose 销毁元素的 scrollspy。(删除存储在 DOM 元素上的数据)
getInstance 获取与 DOM 元素关联的 scrollspy 实例的静态方法。
getOrCreateInstance 获取与 DOM 元素关联的 scrollspy 实例的静态方法,或者在未初始化的情况下创建一个新实例。
refresh 在 DOM 中添加或删除元素时,您需要调用刷新方法。

这是使用刷新方法的示例:

const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
dataSpyList.forEach(dataSpyEl => {
  bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
})

事件

事件 描述
activate.bs.scrollspy 只要 scrollspy 激活锚点,就会在滚动元素上触发此事件。
const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
  // do something...
})