スクロールスパイ～Bootstrap4移行ガイド

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

使い方（How it works）

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

ソースファイルからJavaScriptを構築する場合は、util.js が必要。
Bootstrapのナビゲーションコンポーネントまたはリストグループコンポーネントで使用する必要がある。
スクロールスパイは、監視している要素に position：relative; を必要とする（通常は <body>）。
<body> 以外の要素を監視するときは、height と overflow-y：scroll; が適用されていることを確認すること。
アンカー（<a>）は必須であり、その id を持つ要素を指し示す必要がある。

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

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

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

ページ1

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

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

ページ2

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

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

メニュー1

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

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

メニュー2

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

メニュー3

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

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

設定例

<body style="padding-top:70px;" data-spy="scroll" data-target="#Navbar">
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
		<a class="navbar-brand" href="#">ブランド</a>
		<button type="button" class="navbar-toggler" data-toggle="collapse" data-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 ml-auto">
				<li class="nav-item"><a class="nav-link active" href="#page1">ページ1</a></li>
				<li class="nav-item"><a class="nav-link" href="#page2">ページ2</a></li>
				<li class="nav-item dropdown">
				<li class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">ドロップダウン</a>
					<div class="dropdown-menu dropdown-menu-right">
						<a class="dropdown-item" href="#menu1">メニュー1</a>
						...
					</div>
				</li>
			</ul>
		</div>
	</nav>
	<div class="container py-2">
		<div id="page1">
			<h3>ページ1</h3>
			<p>ゆっくり下へスクロールしてみて下さい。</p>
			...
		</div>
		<div id="page2">
			<h3>ページ2</h3>
			<p>スクロールの一番上がページ2になると上部のナビゲーションバーのアクティブの部分がページ2に変わります。</p>
			...
		</div>
		<div id="menu1">
			<h3>メニュー1</h3>
			<p>スクロールの一番上がメニュー1になると上部のナビゲーションバーのアクティブの部分がドロップダウンに変わり、ドロップメニューのメニュー1がアクティブになります。</p>
			...
		</div>
		...
	</div>
</body>

【設定】

body[data-spy="scroll"][data-target="ナビゲーションの親要素のID"] > 《ナビゲーションの設定》

【注意】

ナビゲーションバーで使用する際には、ul.nav.navbar-nav（ナビゲーションバーのナビゲーション）ではなく、ul.nav.nav-pills（ピルナビゲーション）に設定すること
折り畳み式にする場合は、nav.navbar.navbar-expand-* > div.collapse.navbar-collapse > ul.nav.nav-pills.flex-column.flex-*-row の形式にする（* に入れるブレイクポイントは統一する）

【変更履歴】

【v4.6.1】
- ドロップダウンボタン（li.nav-link.dropdown-toggle）の設定で aria-haspopup="true" 属性（ポップアップメニューが存在するかどうかを示す）が不要に

入れ子になったナビゲーションバーでの設定（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の文章です。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

設定例

HTML<nav id="navbar-example3" class="navbar navbar-light bg-light">
	<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 ml-3 my-1" href="#item-1-1">アイテム 1-1</a>
			<a class="nav-link ml-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 ml-3 my-1" href="#item-3-1">アイテム 3-1</a>
			<a class="nav-link ml-3 my-1" href="#item-3-2">アイテム 3-2</a>
		</nav>
	</nav>
</nav>

<div data-spy="scroll" data-target="#navbar-example3" data-offset="0" class="scrollspy">
	<h4 id="item-1">アイテム 1</h4>
	<p>...</p>
	<h5 id="item-1-1">アイテム 1-1</h5>
	<p>...</p>
	<h5 id="item-1-2">アイテム 2-2</h5>
	<p>...</p>
	<h4 id="item-2">アイテム 2</h4>
	<p>...</p>
	<h4 id="item-3">アイテム 3</h4>
	<p>...</p>
	<h5 id="item-3-1">アイテム 3-1</h5>
	<p>...</p>
	<h5 id="item-3-2">アイテム 3-2</h5>
	<p>...</p>
</div>

CSS.scrollspy {
	position: relative;
	height: 350px;
	overflow: auto;
}

リストグループでの設定（Example with list-group）v4.0.0新設

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

見本

アイテム 1 アイテム 2 アイテム 3 アイテム 4

アイテム 1

アイテム 2

アイテム 3

アイテム 4

アイテム 4の文章です。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

設定例

<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 data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
	<h4 id="list-item-1">アイテム 1</h4>
	<p>...</p>
	<h4 id="list-item-2">アイテム 2</h4>
	<p>...</p>
	<h4 id="list-item-3">アイテム 3</h4>
	<p>...</p>
	<h4 id="list-item-4">アイテム 4</h4>
	<p>...</p>
</div>

使用方法（Usage）

データ属性経由で（Via data attributes）

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

設定例

CSSbody {
	position: relative;
}

HTML<body data-spy="scroll" data-target="#navbar-example">
	...
	<div id="navbar-example">
		<ul class="nav nav-tabs" role="tablist">
			...
		</ul>
	</div>
	...
</body>

JavaScript経由で（Via JavaScript）

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

JavaScript$('body').scrollspy({ target: '#navbar-example' })

リンクが可能なIDターゲットが必要

ナビゲーションバーのリンクにはリンクが可能なIDターゲットが必要。例えば、<a href="#home">home</a> には <div id="home"></div> のようなDOMのどこかに対応する必要がある。

Non- `:visible` ターゲット要素は無視される

jQueryによって:visibleではないターゲット要素は無視され、対応するナビゲーションのアイテムは決して強調表示されない。

メソッド（Methods）v4.0.0一部追加

`.scrollspy('refresh')`

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

JavaScript$('[data-spy="scroll"]').each(function () {
	var $spy = $(this).scrollspy('refresh')
})

`.scrollspy('dispose')` v4.0.0追加

要素のスクロールスパイを破棄。

オプション（Options）v4.5.0一部追加

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

名前	タイプ	デフォルト	説明
offset	number	10	追従を開始するトップからのスクロール位置（ピクセル単位）
method v4.2.1追加	string	auto	スパイ要素がどのセクションにあるかを検索。`auto` は、スクロール座標を取得する最も良い方法を選択。`offset` はスクロール座標を取得するためにjQueryオフセットメソッドを使用。`position` はスクロール座標を取得するためにjQuery位置メソッドを使用。
target v4.2.1追加	string \| jQueryオブジェクト \| DOM要素 v4.5.0追加		スクロールスパイプラグインを適用する要素を指定。

【変更履歴】

【v4.2.1】
- method, target オプションが追加
【v4.5.0】
- target オプションのタイプにjQueryオブジェクトとDOM要素が追加

イベント（Events）

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

使用例

JavaScript$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
	// 何かをする...
})

スクロールスパイ（ScrollSpy） v4.0.0一部新設

使い方（How it works）

ナビゲーションバーでの設定（Example in navbar）v4.6.1設定変更

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

ページ1

ページ2

メニュー1

メニュー2

メニュー3

設定例

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

見本

アイテム 1

アイテム 1-1

アイテム 1-2

アイテム 2

アイテム 3

アイテム 3-1

アイテム 3-2

設定例

リストグループでの設定（Example with list-group）v4.0.0新設

見本

アイテム 1

アイテム 2

アイテム 3

アイテム 4

設定例

使用方法（Usage）

データ属性経由で（Via data attributes）

設定例

JavaScript経由で（Via JavaScript）

リンクが可能なIDターゲットが必要

Non- `:visible` ターゲット要素は無視される

メソッド（Methods）v4.0.0一部追加

`.scrollspy('refresh')`

`.scrollspy('dispose')` v4.0.0追加

オプション（Options）v4.5.0一部追加

イベント（Events）

使用例

スクロールスパイ（ScrollSpy） v4.0.0一部新設

使い方（How it works）

ナビゲーションバーでの設定（Example in navbar）v4.6.1設定変更

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

ページ1

ページ2

メニュー1

メニュー2

メニュー3

設定例

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

見本

アイテム 1

アイテム 1-1

アイテム 1-2

アイテム 2

アイテム 3

アイテム 3-1

アイテム 3-2

設定例

リストグループでの設定（Example with list-group）v4.0.0新設

見本

アイテム 1

アイテム 2

アイテム 3

アイテム 4

設定例

使用方法（Usage）

データ属性経由で（Via data attributes）

設定例

JavaScript経由で（Via JavaScript）

リンクが可能なIDターゲットが必要

Non- :visible ターゲット要素は無視される

メソッド（Methods）v4.0.0一部追加

.scrollspy('refresh')

.scrollspy('dispose') v4.0.0追加

オプション（Options）v4.5.0一部追加

イベント（Events）

使用例

ページ移動

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

Non- `:visible` ターゲット要素は無視される

`.scrollspy('refresh')`

`.scrollspy('dispose')` v4.0.0追加