Bootstrap滾動監(jiān)控可以根據(jù)滾動位置自動更新Bootstrap 導航或列表組組件，以提供視覺上的指示。通過檢測滾動位置并與每個鏈接的位置信息進行比較，可以確定哪個鏈接在視口中處于活動狀態(tài)，并相應地更新樣式。

一、工作原理

滾動監(jiān)控正常運行的幾個要求：

• 必須使用在Bootstrap導航元件nav或列表群組list group；
• 滾動監(jiān)控需要在被監(jiān)控的元素上設定position: relative；
• 錨（a）是必要的，且必須指向到該元素的id。

成功運行后，導航或列表群組將相應更新，根據(jù)相對應的目標將.active從一個項目移動到下一個項目。

可滾動內容與鍵盤兼容性：如果要制作可滾動容器（body除外），請確定已經(jīng)設定height和overflow-y: scroll；旁邊帶有tabindex=“0”，以確保鍵盤兼容性。

二、導航欄

滾動導航下方的塊，并查看active class的變化，下拉菜單項目也會顯示同樣效果。

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#fat" rel="external nofollow" >@fat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo" rel="external nofollow" >@mdo</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#one" rel="external nofollow" >one</a></li>
<li><a class="dropdown-item" href="#two" rel="external nofollow" >two</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#three" rel="external nofollow" >three</a></li>
</ul>
</li>
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0">
<h4 id="fat">@fat</h4>
<p>...</p>
<h4 id="mdo">@mdo</h4>
<p>...</p>
<h4 id="one">one</h4>
<p>...</p>
<h4 id="two">two</h4>
<p>...</p>
<h4 id="three">three</h4>
<p>...</p>
</div>

三、嵌套導航

滾動監(jiān)控也適用于嵌套的.nav。如果嵌套.nav是.active，它的父層也會是.active狀態(tài)。滾動導航條旁的塊，并觀察它的active變化。

<nav id="navbar-example3" class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >Navbar</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1" rel="external nofollow" >Item 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1" rel="external nofollow" >Item 1-1</a>
<a class="nav-link ms-3 my-1" href="#item-1-2" rel="external nofollow" >Item 1-2</a>
</nav>
<a class="nav-link" href="#item-2" rel="external nofollow" >Item 2</a>
<a class="nav-link" href="#item-3" rel="external nofollow" >Item 3</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-3-1" rel="external nofollow" >Item 3-1</a>
<a class="nav-link ms-3 my-1" href="#item-3-2" rel="external nofollow" >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>

四、列表組

滾動監(jiān)控同樣適用.list-group。滾動列表群組旁邊的區(qū)域，并觀察active class變化。

<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1" rel="external nofollow" >Item 1</a>
<a class="list-group-item list-group-item-action" href="#list-item-2" rel="external nofollow" >Item 2</a>
<a class="list-group-item list-group-item-action" href="#list-item-3" rel="external nofollow" >Item 3</a>
<a class="list-group-item list-group-item-action" href="#list-item-4" rel="external nofollow" >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>

五、用法

1、通過數(shù)據(jù)屬性

要在導航條中加上滾動監(jiān)控行為，只要將data-bs-spy=“scroll”加到要監(jiān)控的元素（通常是body）。接著將data-bs-target屬性加入任何Bootstrap .nav元件的父元素ID或class。

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>

2、通過JavaScript

在CSS加入position: relative；后，透過JavaScript調用滾動監(jiān)控：

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

注意：

• 導航連接并需有可解析的ID目標。舉例來說：<a href=”#home”>home</a>必須確實對應到DOM中的<div id=”home”></div>；
• 不可見的目標元素將被忽略，并和其對應的導航也不會有高亮顯示效果。

六、方法

1、刷新

將滾動監(jiān)控與新增或刪除DOM元素一起使用時，需要像這樣調用refresh方法：

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

2、注銷

銷毀元素上的滾動監(jiān)控。（刪除DOM元素上儲存的數(shù)據(jù)）

3、獲取

允許取得滾動監(jiān)控和DOM元素之間關聯(lián)實體的靜態(tài)方法。

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

七、選項

選項可以透過data屬性或是JavaScript傳遞。像是data屬性，增加選項名稱到data-bs-，例如：data-bs-offset=“”.

八、事件

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