卷轴间谍

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

在本页面

这个怎么运作

Scrollspy 有一些要求才能正常运行：

它必须用于 Bootstrap导航组件或列表组。
Scrollspy 需要position: relative;您正在监视的元素，通常是<body>.
Anchors( <a>) 是必需的，并且必须指向带有它的元素id。

成功实施后，您的导航或列表组将相应更新，根据.active相关目标将类从一项移动到下一项。

可滚动容器和键盘访问

如果您正在制作一个可滚动的容器（除了<body>），请确保有一个heightset 并overflow-y: scroll;应用于它 - 与 atabindex="0"一起确保键盘访问。

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

第一个标题

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

第二个标题

第三个标题

第四标题

第五标题

<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="#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-offset="0" class="scrollspy-example" 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 也适用于嵌套.nav的 s。如果一个嵌套.nav是.active，它的父母也将是.active。滚动导航栏旁边的区域并观察活动类的变化。

项目 1

项目 1-1

项目 1-2

第 2 项

第 3 项

项目 3-1

项目 3-2

<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <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 data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
  <h4 id="item-1">Item 1</h4>
  <p>...</p>
  <h5 id="item-1-1">Item 1-1</h5>
  <p>...</p>
  <h5 id="item-1-2">Item 1-2</h5>
  <p>...</p>
  <h4 id="item-2">Item 2</h4>
  <p>...</p>
  <h4 id="item-3">Item 3</h4>
  <p>...</p>
  <h5 id="item-3-1">Item 3-1</h5>
  <p>...</p>
  <h5 id="item-3-2">Item 3-2</h5>
  <p>...</p>
</div>

列表组示例

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

项目 1 第 2 项第 3 项第 4 项

项目 1

第 2 项

第 3 项

第 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 data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" 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>

用法

通过数据属性

要轻松地将 scrollspy 行为添加到您的顶栏导航，请添加data-bs-spy="scroll"到您要监视的元素（通常是<body>）。然后添加带有任何 Bootstrap组件data-bs-target的父元素的 ID 或类的属性。.nav

body {
  position: relative;
}

<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

添加position: relative;CSS 后，通过 JavaScript 调用 scrollspy：

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

需要可解析的 ID 目标

导航栏链接必须具有可解析的 id 目标。例如，a<a href="#home">home</a>必须对应 DOM 中的某些内容，例如<div id="home"></div>.

不可见的目标元素被忽略

不可见的目标元素将被忽略，其相应的导航项将永远不会突出显示。

方法

刷新

当使用 scrollspy 和从 DOM 中添加或删除元素时，你需要像这样调用 refresh 方法：

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

处置

销毁元素的滚动间谍。（删除 DOM 元素上存储的数据）

获取实例

允许您获取与 DOM 元素关联的 scrollspy 实例的静态方法

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

获取或创建实例

静态方法，允许您获取与 DOM 元素关联的 scrollspy 实例，或创建一个新实例以防它未初始化

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到中data-bs-，如data-bs-offset="".

姓名	类型	默认	描述
`offset`	数字	`10`	计算滚动位置时从顶部偏移的像素。
`method`	细绳	`auto`	查找被监视的元素在哪个部分。`auto`将选择获取滚动坐标的最佳方法。`offset`将使用该`Element.getBoundingClientRect()`方法获取滚动坐标。`position`将使用`HTMLElement.offsetTop`and`HTMLElement.offsetLeft`属性来获取滚动坐标。
`target`	字符串 \| jQuery 对象 \| DOM 元素		指定要应用 Scrollspy 插件的元素。

活动

事件类型	描述
`activate.bs.scrollspy`	每当滚动间谍激活新项目时，此事件就会在滚动元素上触发。

var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})

卷轴间谍

这个怎么运作

可滚动容器和键盘访问

导航栏中的示例

第一个标题

第二个标题

第三个标题

第四标题

第五标题

嵌套导航示例

项目 1

项目 1-1

项目 1-2

第 2 项

第 3 项

项目 3-1

项目 3-2

列表组示例

项目 1

第 2 项

第 3 项

第 4 项

用法

通过数据属性

通过 JavaScript

需要可解析的 ID 目标

不可见的目标元素被忽略

方法

刷新

处置

获取实例

获取或创建实例

选项

活动