捲軸間諜

根據滾動位置自動更新 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 目標

不可見的目標元素被忽略

方法

刷新

處置

獲取實例

獲取或創建實例

選項

活動