メインコンテンツへスキップ

スクロールスパイ(ScrollSpy) v5.0.0-beta1設定変更

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

目次

使い方(How it works)

スクロールスパイには、正しく機能するためのいくつかの要件がある:

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

ナビゲーションバーでの設定(Example in navbar)

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

見本 下記の設定例とは違う方法で表示

第1の見出し

ゆっくり下へスクロールしてみて下さい。

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

第2の見出し

スクロールの一番上が第2の見出しになると上部のナビゲーションバーの第2の見出しの部分がアクティブに変わります。

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

第3の見出し

スクロールの一番上が第3の見出しになると上部のナビゲーションバーのアクティブの部分がドロップダウンに変わり、ドロップメニューの第3の見出しの部分がアクティブになります。

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

第4の見出し

スクロールの一番上が第4の見出しになると上部のナビゲーションバーのアクティブの部分がドロップダウンに変わり、ドロップメニューの第4の見出しの部分がアクティブになります。

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

第5の見出し

スクロールの一番上が第5の見出しになると上部のナビゲーションバーのアクティブの部分がドロップダウンに変わり、ドロップメニューの第5の見出しの部分がアクティブになります。

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

Bootstrap5.xの設定例 緑背景が変更箇所
<body style="padding-top:70px;" data-bs-spy="scroll" data-bs-target="#Navbar">
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
		<div class="container-fluid">
			<a class="navbar-brand" href="#">ブランド</a>
			<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#Navbar" aria-controls="Navbar" aria-expanded="false" aria-label="ナビゲーションの切替">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="Navbar">
				<ul class="nav nav-pills flex-column flex-lg-row ms-auto">
					<li class="nav-item"><a class="nav-link active" href="#section1">第1の見出し</a></li>
					<li class="nav-item"><a class="nav-link" href="#section2">第2の見出し</a></li>
					<li class="nav-item dropdown">
					<li class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">ドロップダウン</a>
						<ul class="dropdown-menu dropdown-menu-end">
							<li><a class="dropdown-item" href="#section3">第3の見出し</a></li>
							...
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</nav>
	<div class="container py-2">
		<div id="section1">
			<h3>第1の見出し</h3>
			<p>ゆっくり下へスクロールしてみて下さい。</p>
			...
		</div>
		<div id="section2">
			<h3>第2の見出し</h3>
			<p>スクロールの一番上が第2の見出しになると上部のナビゲーションバーの第2の見出しの部分がアクティブに変わります。</p>
			...
		</div>
		<div id="section3">
			<h3>第3の見出し</h3>
			<p>スクロールの一番上が第3の見出しになると上部のナビゲーションバーのアクティブの部分がドロップダウンに変わり、ドロップメニューの第3の見出しの部分がアクティブになります。</p>
			...
		</div>
		...
	</div>
</body>
【設定】
  • body[data-bs-spy="scroll"][data-bs-target="ナビゲーションの親要素のID"] > 《ナビゲーションの設定》
【注意】
  • <body> 以外の要素に [data-bs-spy="scroll"] を設定する場合は [tabindex="0"] を入れる
  • ナビゲーションバーで使用する際には、ul.nav.navbar-navナビゲーションバーのナビゲーション)ではなく、ul.nav.nav-pillsピルナビゲーション)に設定すること
    折り畳み式にする場合は、nav.navbar.navbar-expand-* > div.container-fluid > div.collapse.navbar-collapse > ul.nav.nav-pills.flex-column.flex-*-row の形式にする(* に入れるブレイクポイントは統一する)
【変更履歴】

 

入れ子になったナビゲーションバーでの設定(Example with nested nav)

ScrollSpyプラグインは入れ子になった .nav でも動作可能。入れ子になった .nav.active の場合、その親も .active になる。ナビゲーションバーの横にある領域をスクロールして、アクティブなクラスの変更を確認。

見本

アイテム 1

アイテム 1の文章です。
これは、スクロールスパイページのプレースホルダーコンテンツ。ページを下にスクロールすると、適切なナビゲーションリンクが強調表示される。これは、コンポーネントの実例全体で繰り返される。スクロールとハイライトを強調するために、ここにいくつかのサンプルコピーを繰り返し追加している。

アイテム 1-1

アイテム 1の子リストであるアイテム 1-1の文章です。
これは、スクロールスパイページのプレースホルダーコンテンツ。ページを下にスクロールすると、適切なナビゲーションリンクが強調表示される。これは、コンポーネントの実例全体で繰り返される。スクロールとハイライトを強調するために、ここにいくつかのサンプルコピーを繰り返し追加している。

アイテム 1-2

同じくアイテム 1の子リストであるアイテム 1-2の文章です。
これは、スクロールスパイページのプレースホルダーコンテンツ。ページを下にスクロールすると、適切なナビゲーションリンクが強調表示される。これは、コンポーネントの実例全体で繰り返される。スクロールとハイライトを強調するために、ここにいくつかのサンプルコピーを繰り返し追加している。

アイテム 2

アイテム 2の文章です。
これは、スクロールスパイページのプレースホルダーコンテンツ。ページを下にスクロールすると、適切なナビゲーションリンクが強調表示される。これは、コンポーネントの実例全体で繰り返される。スクロールとハイライトを強調するために、ここにいくつかのサンプルコピーを繰り返し追加している。

アイテム 3

アイテム 3の文章です。
これは、スクロールスパイページのプレースホルダーコンテンツ。ページを下にスクロールすると、適切なナビゲーションリンクが強調表示される。これは、コンポーネントの実例全体で繰り返される。スクロールとハイライトを強調するために、ここにいくつかのサンプルコピーを繰り返し追加している。

アイテム 3-1

アイテム 3の子リストであるアイテム 3-1の文章です。
これは、スクロールスパイページのプレースホルダーコンテンツ。ページを下にスクロールすると、適切なナビゲーションリンクが強調表示される。これは、コンポーネントの実例全体で繰り返される。スクロールとハイライトを強調するために、ここにいくつかのサンプルコピーを繰り返し追加している。

アイテム 3-2

同じくアイテム 3の子リストであるアイテム 3-2の文章です。
これは、スクロールスパイページのプレースホルダーコンテンツ。ページを下にスクロールすると、適切なナビゲーションリンクが強調表示される。これは、コンポーネントの実例全体で繰り返される。スクロールとハイライトを強調するために、ここにいくつかのサンプルコピーを繰り返し追加している。

Bootstrap5.xの設定例 緑背景が変更箇所
HTML<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 active" href="#item-1">アイテム 1</a>
		<nav class="nav nav-pills flex-column">
			<a class="nav-link ms-3 my-1" href="#item-1-1">アイテム 1-1</a>
			<a class="nav-link ms-3 my-1" href="#item-1-2">アイテム 1-2</a>
		</nav>
		<a class="nav-link" href="#item-2">アイテム2</a>
		<a class="nav-link" href="#item-3">アイテム3</a>
		<nav class="nav nav-pills flex-column">
			<a class="nav-link ms-3 my-1" href="#item-3-1">アイテム 3-1</a>
			<a class="nav-link ms-3 my-1" href="#item-3-2">アイテム 3-2</a>
		</nav>
	</nav>
</nav>

<div class="scrollspy" data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
	<h4 id="item-1">アイテム 1</h4>
	<p>アイテム 1の文章です。...</p>
	<h5 id="item-1-1">アイテム 1-1</h5>
	<p>アイテム 1-1の文章です。...</p>
	<h5 id="item-1-2">アイテム 2-2</h5>
	<p>アイテム 1-2の文章です。...</p>
	<h4 id="item-2">アイテム 2</h4>
	<p>アイテム 2の文章です。...</p>
	<h4 id="item-3">アイテム 3</h4>
	<p>アイテム 3の文章です。...</p>
	<h5 id="item-3-1">アイテム 3-1</h5>
	<p>アイテム 3-1の文章です。...</p>
	<h5 id="item-3-2">アイテム 3-2</h5>
	<p>アイテム 3-2の文章です。...</p>
</div>
CSS.scrollspy {
	position: relative;
	height: 350px;
	overflow: auto;
}

 

リストグループでの設定(Example with list-group)

ScrollSpyプラグインは .list-group でも動作。リストグループの横にある領域をスクロールして、アクティブなクラスの変更を確認する。

見本

アイテム 1

アイテム 1の文章です。
これは、スクロールスパイページのプレースホルダーコンテンツ。ページを下にスクロールすると、適切なナビゲーションリンクが強調表示される。これは、コンポーネントの実例全体で繰り返される。スクロールとハイライトを強調するために、ここにいくつかのサンプルコピーを繰り返し追加している。

アイテム 2

アイテム 2の文章です。
これは、スクロールスパイページのプレースホルダーコンテンツ。ページを下にスクロールすると、適切なナビゲーションリンクが強調表示される。これは、コンポーネントの実例全体で繰り返される。スクロールとハイライトを強調するために、ここにいくつかのサンプルコピーを繰り返し追加している。

アイテム 3

アイテム 3の文章です。
これは、スクロールスパイページのプレースホルダーコンテンツ。ページを下にスクロールすると、適切なナビゲーションリンクが強調表示される。これは、コンポーネントの実例全体で繰り返される。スクロールとハイライトを強調するために、ここにいくつかのサンプルコピーを繰り返し追加している。

アイテム 4

アイテム 4の文章です。
これは、スクロールスパイページのプレースホルダーコンテンツ。ページを下にスクロールすると、適切なナビゲーションリンクが強調表示される。これは、コンポーネントの実例全体で繰り返される。スクロールとハイライトを強調するために、ここにいくつかのサンプルコピーを繰り返し追加している。

設定例
HTML<div id="list-example" class="list-group" style="max-width: 400px;">
	<a class="list-group-item active list-group-item-action" href="#list-item-1">アイテム 1</a>
	<a class="list-group-item list-group-item-action" href="#list-item-2">アイテム 2</a>
	<a class="list-group-item list-group-item-action" href="#list-item-3">アイテム 3</a>
	<a class="list-group-item list-group-item-action" href="#list-item-4">アイテム 4</a>
</div>
<div class="scrollspy" data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" tabindex="0">
	<h4 id="list-item-1">アイテム 1</h4>
	<p>アイテム 1の文章です。...</p>
	<h4 id="list-item-2">アイテム 2</h4>
	<p>アイテム 2の文章です。...</p>
	<h4 id="list-item-3">アイテム 3</h4>
	<p>アイテム 3の文章です。...</p>
	<h4 id="list-item-4">アイテム 4</h4>
	<p>アイテム 4の文章です。...</p>
</div>
CSS.scrollspy {
	position: relative;
	height: 200px;
	margin-top: .5rem;
	overflow: auto;
}

 

使用方法(Usage)

データ属性経由で(Via data attributes)

スクロールバーの動作をトップバーのナビゲーションに簡単に追加するには、追従する要素(通常は<body>)に data-bs-spy="scroll" を追加。次に、任意のBootstrap .nav コンポーネントの親要素のIDかクラス名を data-bs-target 属性に追加。

設定例
CSSbody {
	position: relative;
	padding-top: 70px;
}
HTML<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経由で(Via JavaScript)v5.0.0-alpha1設定変更

CSSに position: relative; を追加した後、JavaScriptでスクロールスパイを呼び出す:

Bootstrap5.xの設定例
JavaScriptvar scrollSpy = new bootstrap.ScrollSpy(document.body, {
	target: '#navbar-example'
})
※Bootstrap4.xの設定例
JavaScript$('body').scrollspy({ target: '#navbar-example' })
【変更履歴】
  • 【v5.0.0-alpha1】
    • JavaScriptの設定がjQueryに依存しない方法に変更

メソッド(Methods)v5.0.0-alpha1設定変更、追加

refresh

スクロールスパイをDOMの要素の追加や削除と組み合わせて使用する場合は、refreshメソッドを次のように呼び出す必要がある:

Bootstrap5.xの設定例
JavaScriptvar dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
	bootstrap.ScrollSpy.getInstance(dataSpyEl)
		.refresh()
})
※Bootstrap4.xの設定例
JavaScript$('[data-spy="scroll"]').each(function () {
	var $spy = $(this).scrollspy('refresh')
})

dispose

要素のスクロールスパイを破棄(DOM要素に保存されているデータを削除)。

DOM要素に関連付けられたスクロールスパイ・インスタンスを取得することを可能にする静的メソッド

JavaScriptvar scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Bootstrapスクロールスパイ・インスタンスを返す
【変更履歴】
  • 【v5.0.0-alpha1】
    • $().scrollspy('xxx')scrollspy.xxx()
    • getInstance メソッドが追加

オプション(Options)

オプションは、データ属性かJavaScriptを使用して渡すことが可能。データ属性の場合は、data-bs-offset="" のように data-bs- にオプション名を追加。

名前 タイプ デフォルト 説明
offset number 10 追従を開始するトップからのスクロール位置(ピクセル単位)
method string auto スパイ要素がどのセクションにあるかを検索。
auto は、スクロール座標を取得する最も良い方法を選択。
offsetElement.getBoundingClientRect() メソッドを使用してスクロール座標を取得。
positionHTMLElement.offsetTop 及び HTMLElement.offsetLeft プロパティを使用してスクロール座標を取得。
target string | jQueryオブジェクト | DOM要素 スクロールスパイプラグインを適用する要素を指定。

イベント(Events)

イベントタイプ 説明
activate.bs.scrollspy 新しいアイテムがスクロールスパイによってアクティブになるたびにスクロール要素で発動。
使用例 v5.0.0-beta1設定変更
JavaScriptvar firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
	// 何かをする...
})