Scrollspy

スクロール位置に基づいて、Bootstrap のナビゲーションまたはリストグループコンポーネントを自動的に更新し、ビューポートで現在アクティブなリンクを示します。

このページの内容

動作原理

Scrollspy は、アンカー（``）要素の `href` 属性で参照される `id` を持つ要素がスクロール表示されると、そのアンカー要素に `.active` クラスを切り替えます。Scrollspy は、Bootstrap のナビコンポーネントまたはリストグループと組み合わせて使用するのが最適ですが、現在のページ内の任意のアンカー要素でも機能します。動作原理を以下に示します。

はじめに、Scrollspy は、ナビゲーション、リストグループ、またはシンプルなリンクのセット、そしてスクロール可能なコンテナの 2 つの要素を必要とします。スクロール可能なコンテナは `<body>` でも、`height` と `overflow-y: scroll` が設定されたカスタム要素でも構いません。
スクロール可能なコンテナに `data-bs-spy="scroll"` と `data-bs-target="#navId"` を追加します。ここで `navId` は関連付けられたナビゲーションの一意の `id` です。要素内にフォーカス可能な要素がない場合は、キーボードアクセスを確保するために `tabindex="0"` も含めるようにしてください。
「監視対象」のコンテナをスクロールすると、関連付けられたナビゲーション内のアンカーリンクに `.active` クラスが付加および削除されます。リンクは解決可能な `id` ターゲットを持っている必要があります。そうでない場合は無視されます。例えば、`<a href="#home">home</a>` は、DOM 内の `<div id="home"></div>` などに対応している必要があります。
非表示のターゲット要素は無視されます。非表示の要素セクションを参照してください。

例

ナビバーの下の領域をスクロールして、アクティブクラスの変化を確認してください。ドロップダウンメニューを開いて、ドロップダウンアイテムがハイライトされる様子も確認してください。

見出し1

これは、scrollspy ページのプレースホルダーコンテンツです。ページをスクロールダウンすると、適切なナビゲーションリンクがハイライトされることに注意してください。これは、コンポーネントの例全体で繰り返されます。スクロールとハイライトを強調するために、さらに例となるコピーを追加し続けています。

見出し2

見出し3

見出し4

見出し5

<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 は、ネストされた `.nav` でも機能します。ネストされた `.nav` が `.active` の場合、その親も `.active` になります。ナビバーの横の領域をスクロールして、アクティブクラスの変化を確認してください。

項目1

JavaScript プラグインは、表示されている可能性のあるすべての要素の中から適切な要素を選択しようとします。同時に複数の表示可能な Scrollspy ターゲットがあると、問題が発生する可能性があります。

項目1-1

項目1-2

項目2

項目3

項目3-1

項目3-2

<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-group` でも機能します。リストグループの横の領域をスクロールして、アクティブクラスの変化を確認してください。

項目1 項目2 項目3 項目4

項目1

項目2

項目3

項目4

<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 項目2 項目3 項目4 項目5

項目1

項目2

項目3

項目4

項目5

<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 の動作を簡単に追加するには、監視する要素（通常は `<body>`）に `data-bs-spy="scroll"` を追加します。次に、Bootstrap の `.nav` コンポーネントの親要素の `id` またはクラス名を指定して `data-bs-target` 属性を追加します。

<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'
})

オプション

オプションはデータ属性または JavaScript を介して渡すことができるため、`data-bs-` にオプション名を付加することができます（例：`data-bs-animation="{value}"`）。データ属性を介してオプションを渡す場合は、オプション名のケースタイプを「_camelCase_」から「_kebab-case_」に変更してください。例えば、`data-bs-customClass="beautifier"` の代わりに `data-bs-custom-class="beautifier"` を使用します。

Bootstrap 5.2.0 以降、すべてのコンポーネントは、JSON 文字列として単純なコンポーネント設定を格納できる、**実験的な** 予約済みデータ属性 `data-bs-config` をサポートしています。要素に `data-bs-config='{"delay":0, "title":123}'` と `data-bs-title="456"` 属性がある場合、最終的な `title` の値は `456` になり、個別のデータ属性は `data-bs-config` で指定された値を上書きします。さらに、既存のデータ属性は `data-bs-delay='{"show":0,"hide":150}'` のような JSON 値を格納できます。

最終的な設定オブジェクトは、`data-bs-config`、`data-bs-`、および `js オブジェクト` のマージされた結果であり、最後に指定されたキーバリューが他の値を上書きします。

名前	型	デフォルト	説明
`rootMargin`	文字列	`0px 0px -25%`	スクロール位置を計算する際の、Intersection Observer rootMargin の有効な単位。
`smoothScroll`	ブール値	`false`	ユーザーが ScrollSpy オブザーバブルを参照するリンクをクリックしたときに、スムーズスクロールを有効にします。
`target`	文字列、DOM 要素	`null`	Scrollspy プラグインを適用する要素を指定します。
`threshold`	配列	`[0.1, 0.5, 1]`	スクロール位置を計算する際の、`IntersectionObserver` threshold の有効な入力。

非推奨のオプション

v5.1.3までは、offsetとmethodオプションを使用していましたが、これらは非推奨となり、rootMarginに置き換えられました。後方互換性を維持するために、指定されたoffsetをrootMarginに解析し続けますが、この機能は**v6**で削除されます。

メソッド

メソッド	説明
`dispose`	要素のスクロールスパイを破棄します。(DOM要素に保存されているデータを削除します)
`getInstance`	DOM要素に関連付けられたスクロールスパイインスタンスを取得するための静的メソッドです。
`getOrCreateInstance`	DOM要素に関連付けられたスクロールスパイインスタンスを取得するか、初期化されていない場合は新規に作成するための静的メソッドです。
`refresh`	DOMに要素を追加または削除する場合、refreshメソッドを呼び出す必要があります。

refreshメソッドを使用した例を次に示します。

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

イベント

イベント	説明
`activate.bs.scrollspy`	このイベントは、スクロールスパイによってアンカーがアクティブ化されるたびに、スクロール要素で発生します。

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