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

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

スクロールスパイ(ScrollSpy) v4.0.0一部新設

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

使い方(How it works)

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

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

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

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

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

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

ページ1

スクロールしてみて下さい。

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

ページ2

サイトがページ2になると上部のナビゲーションバーのアクティブの部分がページ2に変わります。

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

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

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

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

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

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

サイトがメニュー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">
				<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-haspopup="true" aria-expanded="false">ドロップダウン</a>
					<div class="dropdown-menu">
						<a class="dropdown-item" href="#menu1">メニュー1</a>
						...
					</div>
				</li>
			</ul>
		</div>
	</nav>
	<div class="container">
		<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"] > 《ナビゲーションの設定》

【注意】

 

入れ子になったナビゲーションバーでの設定(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

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

アイテム 2

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

アイテム 3

アイテム 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' })

メソッド(Methods)v4.0.0-beta.2一部追加

.scrollspy('refresh')

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

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

.scrollspy('dispose') v4.0.0-beta.2追加

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

オプション(Options)v4.2.1一部追加

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

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

イベント(Events)

イベントタイプ 説明
activate.bs.scrollspy このイベントは、新しいアイテムがスクロールスパイによってアクティブになるたびにスクロール要素で発動。
使用例
JavaScript$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
	// 何かをする...
})