Scrollspy滚动侦探
Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.根据滚动位置自动更新Bootstrap导航或列表组组件，以指示视口中当前处于活动状态的链接。
How it works工作原理
Scrollspy has a few requirements to function properly:Scrollspy对正常运行有一些要求：
It must be used on a Bootstrap nav component or list group.它必须用于Bootstrap导航组件或列表组。Scrollspy requires滚动侦探需要在您监视的元素（通常是position: relative;on the element you’re spying on, usually the<body>.<body>）上使用position: relative;。Anchors (锚（<a>) are required and must point to an element with thatid.<a>）是必需的，并且必须指向具有该id的元素。
When successfully implemented, your nav or list group will update accordingly, moving the 成功实施后，您的nav或列表组将相应更新，并根据其关联目标将.active class from one item to the next based on their associated targets..active类从一个项目移动到下一个项目。
Scrollable containers and keyboard access可滚动的容器和键盘访问
If you’re making a scrollable container (other than the 如果您正在制作可滚动的容器（而不是 <body>), be sure to have a height set and overflow-y: scroll; applied to it—alongside a tabindex="0" to ensure keyboard access.<body>），确保设置了height并应用了overflow-y: scroll;，还应用了tabindex="0"以确保键盘访问。
Example in navbar导航栏中的示例
Scroll the area below the navbar and watch the active class change. 滚动导航栏下方的区域，观察活动类别的更改。The dropdown items will be highlighted as well.下拉项也将突出显示。
First heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Second heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Third heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fourth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fifth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
<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>
Example with nested nav嵌套导航的示例
Scrollspy also works with nested Scrollspy还可用于嵌套的.navs. .nav。If a nested 如果嵌套的.nav is .active, its parents will also be .active. .nav处于.active状态，则其父级也将处于.active状态。Scroll the area next to the navbar and watch the active class change.滚动导航栏旁边的区域，观察活动类的更改。
Item 1
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 1-1
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 1-2
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 2
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 3
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 3-1
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 3-2
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
<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>
Example with list-group列表组示例
Scrollspy also works with 滚动侦探还可用于.list-groups. .list-group。Scroll the area next to the list group and watch the active class change.滚动列表组旁边的区域，观察活动类别的更改。
Item 1
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 2
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 3
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 4
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
<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>
Usage用法
Via data attributes通过data属性
To easily add scrollspy behavior to your topbar navigation, add 要轻松地将滚动侦探行为添加到顶栏导航，请将data-bs-spy="scroll" to the element you want to spy on (most typically this would be the <body>). data-bs-spy="scroll"添加到要监视的元素（最典型的是<body>）。Then add the 然后添加data-bs-target attribute with the ID or class of the parent element of any Bootstrap .nav component.data-bs-target属性，使用任何Bootstrap.nav组件的父元素的ID或类。
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>
Via JavaScript通过JavaScript
After adding 在CSS中添加position: relative; in your CSS, call the scrollspy via JavaScript:position: relative;之后，通过JavaScript调用滚动侦探：
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Resolvable ID targets required需要可分辨ID目标
Navbar links must have resolvable id targets. 导航栏链接必须具有可解析的id目标。For example, a 例如，<a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>.<a href="#home">home</a>必须对应于DOM中的某些内容，如<div id="home"></div>。
Non-visible target elements ignored忽略不可见的目标元素
Target elements that are not visible will be ignored and their corresponding nav items will never be highlighted.不可见的目标元素将被忽略，其相应的导航项将永远不会高亮显示。
Methods方法
refresh刷新
When using scrollspy in conjunction with adding or removing of elements from the DOM, you’ll need to call the refresh method like so:当将scrollspy与从DOM中添加或删除元素结合使用时，您需要调用刷新方法，如下所示：
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
dispose销毁
Destroys an element’s scrollspy. 销毁元素的滚动侦探。(Removes stored data on the DOM element)（删除DOM元素上存储的数据）
getInstance
Static method which allows you to get the scrollspy instance associated with a DOM element静态方法，该方法允许您获取与DOM元素关联的scrollspy实例
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
Static method which allows you to get the scrollspy instance associated with a DOM element, or create a new one in case it wasn’t initialised静态方法，该方法允许您获取与DOM元素关联的滚动侦探实例，或者在未初始化的情况下创建一个新实例
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Options选项
Options can be passed via data attributes or JavaScript. 选项可以通过数据属性或JavaScript传递。For data attributes, append the option name to 对于数据属性，将选项名称附加到data-bs-, as in data-bs-offset="".data-bs-，如data-bs-offset=""。
offset |
number | 10 |
|
method |
string | auto |
auto will choose the best method to get scroll coordinates. auto将选择获取滚动坐标的最佳方法。offset will use the Element.getBoundingClientRect() method to get scroll coordinates. offset将使用Element.getBoundingClientRect()方法获取滚动坐标。position will use the HTMLElement.offsetTop and HTMLElement.offsetLeft properties to get scroll coordinates.position将使用HTMLElement.offsetTop和HTMLElement.offsetLeft属性获取滚动坐标。 |
target |
string | jQuery object | DOM element |
Events事件
| Event type | |
|---|---|
activate.bs.scrollspy |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})