タブ・メニューにおけるスクロールスパイ ≪ スクロールスパイ ≪ JavaScript ≪ Bootstrap3日本語リファレンス

ページ内リンク用タブ・メニューにおけるスクロールスパイ使用方法。

タブ・メニューにスクロール連動させたい要素に対し、スタイルシートでoverflow: scroll;を指定する。
タブ・メニューにスクロール連動させたい要素のdata-spy属性に、scrollを指定する。
タブ・メニューにスクロール連動させたい要素のdata-target属性に、スクロールに連動させたいタブ・メニューのid属性値やclass属性値を指定する。

サンプル

ソースコード

HTML

<header id="sampleHeader" class="container-fluid">
	<div class="container">
		<h1 class="text-center">サンプル</h1>	
		<div id="sampleScrollSpy">
			<ul class="nav nav-tabs">
				<li><a class="linkInThePage" href="#sampleA">ページ内リンクＡ</a></li>
				<li><a class="linkInThePage" href="#sampleB">ページ内リンクＢ</a></li>
				<li><a class="linkInThePage" href="#sampleC">ページ内リンクＣ</a></li>
			</ul>
		</div>
	</div>
</header>

<div class="container-fluid">
	<div class="container">
		<div id="sampleMainContents" data-spy="scroll" data-target="#sampleScrollSpy" data-offset="112">
			<p><a href="../javascript/scrollspy-tabs.html" target="_blank">タブ・メニューにおけるスクロールスパイ</a>のサンプル。</p>
			<h2 id="sampleA">Ａ</h2>
			<ol>
				<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
				<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
				<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			</ol>
			<h2 id="sampleB">Ｂ</h2>
			<ol>
				<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
				<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
				<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			</ol>
			<h2 id="sampleC">Ｃ</h2>
			<ol>
				<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
				<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
				<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			</ol>
		</div>
	</div>
</div>

CSS

body {
	min-width: 460px;
}
#sampleHeader {
	height: 112px;
}
#sampleMainContents {
	overflow: scroll;
	height: 380px;
	padding: 2em;
	border-left: 1px solid #ddd;
}