スクロールスパイ

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

このページでは

使い方

Scrollspy が正しく機能するには、いくつかの要件があります。

Bootstrap nav コンポーネントまたはリストグループで使用する必要があります。
Scrollspy はposition: relative;、スパイしている要素、通常は<body>.
アンカー ( <a>) が必要であり、それを持つ要素を指している必要がありidます。

正常に実装されると、それに応じてナビゲーションまたはリストグループが更新さ.activeれ、関連するターゲットに基づいてクラスが 1 つのアイテムから次のアイテムに移動します。

スクロール可能なコンテナとキーボードアクセス

スクロール可能なコンテナ ( 以外<body>)を作成している場合は、キーボードアクセスを確保するために、 a と一緒にheightセットをoverflow-y: scroll;適用してください。tabindex="0"

ナビゲーションバーの下の領域をスクロールして、アクティブなクラスの変化を確認します。ドロップダウン項目も強調表示されます。

最初の見出し

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

2 番目の見出し

第 3 見出し

第 4 見出し

第 5 見出し

<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 はネストされた.navs でも動作します。ネストされた.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 経由

CSSを追加position: relative;したら、JavaScript 経由で scrollspy を呼び出します。

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

解決可能な ID ターゲットが必要

Navbar リンクには、解決可能な 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()
})

廃棄

要素の scrollspy を破棄します。(DOM要素に格納されたデータを削除します)

getInstance

DOM 要素に関連付けられた scrollspy インスタンスを取得できる静的メソッド

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

getOrCreateInstance

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.offsetTopHTMLElement.offsetLeft`
`target`	文字列 \| jQuery オブジェクト \| DOM 要素		Scrollspy プラグインを適用する要素を指定します。

イベント

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

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

スクロールスパイ

使い方

スクロール可能なコンテナとキーボード アクセス

ナビゲーションバーの例

最初の見出し

2 番目の見出し

第 3 見出し

第 4 見出し

第 5 見出し

ネストされたナビゲーションの例

アイテム1

項目1-1

項目1-2

項目 2

アイテム3

項目3-1

項目3-2

リストグループの例

アイテム1

項目 2

アイテム3

項目4

使用法

データ属性経由

JavaScript 経由

解決可能な ID ターゲットが必要

非表示のターゲット要素は無視されました

メソッド

リフレッシュ

廃棄

getInstance

getOrCreateInstance

オプション

イベント

スクロール可能なコンテナとキーボードアクセス