スクロールスパイ
ビューポートで現在アクティブなリンクを示すために、スクロール位置に基づいて Bootstrap ナビゲーションまたはリスト グループ コンポーネントを自動的に更新します。
使い方
Scrollspy が正しく機能するには、いくつかの要件があります。
- Bootstrap nav コンポーネントまたはリスト グループで使用する必要があります。
- Scrollspy は
position: relative;
、スパイしている要素、通常は<body>
. - アンカー (
<a>
) が必要であり、それを持つ要素を指している必要がありid
ます。
正常に実装されると、それに応じてナビゲーションまたはリスト グループが更新さ.active
れ、関連するターゲットに基づいてクラスが 1 つのアイテムから次のアイテムに移動します。
スクロール可能なコンテナとキーボード アクセス
スクロール可能なコンテナ ( 以外<body>
)を作成している場合は、キーボード アクセスを確保するために、 a と一緒にheight
セットをoverflow-y: scroll;
適用してください。tabindex="0"
ナビゲーションバーの例
ナビゲーションバーの下の領域をスクロールして、アクティブなクラスの変化を確認します。ドロップダウン項目も強調表示されます。
最初の見出し
これは、scrollspy ページのプレースホルダー コンテンツです。ページを下にスクロールすると、適切なナビゲーション リンクが強調表示されることに注意してください。コンポーネントの例全体で繰り返されます。スクロールと強調表示を強調するために、ここにいくつかの例のコピーを追加し続けます。
2 番目の見出し
これは、scrollspy ページのプレースホルダー コンテンツです。ページを下にスクロールすると、適切なナビゲーション リンクが強調表示されることに注意してください。コンポーネントの例全体で繰り返されます。スクロールと強調表示を強調するために、ここにいくつかの例のコピーを追加し続けます。
第 3 見出し
これは、scrollspy ページのプレースホルダー コンテンツです。ページを下にスクロールすると、適切なナビゲーション リンクが強調表示されることに注意してください。コンポーネントの例全体で繰り返されます。スクロールと強調表示を強調するために、ここにいくつかの例のコピーを追加し続けます。
第 4 見出し
これは、scrollspy ページのプレースホルダー コンテンツです。ページを下にスクロールすると、適切なナビゲーション リンクが強調表示されることに注意してください。コンポーネントの例全体で繰り返されます。スクロールと強調表示を強調するために、ここにいくつかの例のコピーを追加し続けます。
第 5 見出し
これは、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
これは、scrollspy ページのプレースホルダー コンテンツです。ページを下にスクロールすると、適切なナビゲーション リンクが強調表示されることに注意してください。コンポーネントの例全体で繰り返されます。スクロールと強調表示を強調するために、ここにいくつかの例のコピーを追加し続けます。
項目1-1
これは、scrollspy ページのプレースホルダー コンテンツです。ページを下にスクロールすると、適切なナビゲーション リンクが強調表示されることに注意してください。コンポーネントの例全体で繰り返されます。スクロールと強調表示を強調するために、ここにいくつかの例のコピーを追加し続けます。
項目1-2
これは、scrollspy ページのプレースホルダー コンテンツです。ページを下にスクロールすると、適切なナビゲーション リンクが強調表示されることに注意してください。コンポーネントの例全体で繰り返されます。スクロールと強調表示を強調するために、ここにいくつかの例のコピーを追加し続けます。
項目 2
これは、scrollspy ページのプレースホルダー コンテンツです。ページを下にスクロールすると、適切なナビゲーション リンクが強調表示されることに注意してください。コンポーネントの例全体で繰り返されます。スクロールと強調表示を強調するために、ここにいくつかの例のコピーを追加し続けます。
アイテム3
これは、scrollspy ページのプレースホルダー コンテンツです。ページを下にスクロールすると、適切なナビゲーション リンクが強調表示されることに注意してください。コンポーネントの例全体で繰り返されます。スクロールと強調表示を強調するために、ここにいくつかの例のコピーを追加し続けます。
項目3-1
これは、scrollspy ページのプレースホルダー コンテンツです。ページを下にスクロールすると、適切なナビゲーション リンクが強調表示されることに注意してください。コンポーネントの例全体で繰り返されます。スクロールと強調表示を強調するために、ここにいくつかの例のコピーを追加し続けます。
項目3-2
これは、scrollspy ページのプレースホルダー コンテンツです。ページを下にスクロールすると、適切なナビゲーション リンクが強調表示されることに注意してください。コンポーネントの例全体で繰り返されます。スクロールと強調表示を強調するために、ここにいくつかの例のコピーを追加し続けます。
<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-group
s でも動作します。リスト グループの横の領域をスクロールして、アクティブなクラスの変化を確認します。
アイテム1
これは、scrollspy ページのプレースホルダー コンテンツです。ページを下にスクロールすると、適切なナビゲーション リンクが強調表示されることに注意してください。コンポーネントの例全体で繰り返されます。スクロールと強調表示を強調するために、ここにいくつかの例のコピーを追加し続けます。
項目 2
これは、scrollspy ページのプレースホルダー コンテンツです。ページを下にスクロールすると、適切なナビゲーション リンクが強調表示されることに注意してください。コンポーネントの例全体で繰り返されます。スクロールと強調表示を強調するために、ここにいくつかの例のコピーを追加し続けます。
アイテム3
これは、scrollspy ページのプレースホルダー コンテンツです。ページを下にスクロールすると、適切なナビゲーション リンクが強調表示されることに注意してください。コンポーネントの例全体で繰り返されます。スクロールと強調表示を強調するために、ここにいくつかの例のコピーを追加し続けます。
項目4
これは、scrollspy ページのプレースホルダー コンテンツです。ページを下にスクロールすると、適切なナビゲーション リンクが強調表示されることに注意してください。コンポーネントの例全体で繰り返されます。スクロールと強調表示を強調するために、ここにいくつかの例のコピーを追加し続けます。
<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.offsetTop 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...
})