English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 基本チュートリアル

Bootstrap4 スクロール監視

スクロール監視（Scrollspy）プラグイン、自動更新ナビゲーションプラグインは、スクロールバーの位置に応じて自動的に対応するナビゲーションターゲットを更新します。基本的な実装は、あなたのスクロールに従って行われます。

スクロール監視の作成方法

以下の例では、スクロール監視の作成方法を示しています：

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
　　<style>
　　body　{
　　　　　　position:　relative;　
　　}
　　</style>
</head>
<body　data-spy="scroll"　data-target=".navbar"　data-offset="50">
＜nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark　fixed-top">　　
　　＜ul　class="navbar-nav">
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#section1">Section　1</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#section2">Section　2</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#section3">Section　3</a>
　　　　</li>
　　　　<li　class="nav-item　dropdown">
　　　　　　<a　class="nav-link　dropdown-toggle"　href="#"　id="navbardrop"　data-toggle="dropdown">
　　　　　　　　セクション　4
　　　　　　</a>
　　　　　　<div　class="dropdown-menu">
　　　　　　　　<a　class="dropdown-item"　href="#section41">リンク　1</a>
　　　　　　　　<a　class="dropdown-item"　href="#section42">リンク　2</a>
　　　　　　</div>
　　　　</li>
　　</ul>
</nav>
<div　id="section1"　class="container-fluid　bg-success"　style="padding-top:70px;padding-bottom:70px＞
　　<h1>セクション　1</h1>
　　＜p>この部分をスクロールしてみて、スクロール中にナビゲーションバーを確認してください！　この部分をスクロールして、スクロール中にナビゲーションバーを確認してください!/p>
　　＜p>この部分をスクロールしてみて、スクロール中にナビゲーションバーを確認してください！　この部分をスクロールして、スクロール中にナビゲーションバーを確認してください!/p>
</div>
<div　id="section2"　class="container-fluid　bg-warning"　style="padding-top:70px;padding-bottom:70px＞
　　<h1>セクション　2</h1>
　　＜p>この部分をスクロールしてみて、スクロール中にナビゲーションバーを確認してください！　この部分をスクロールして、スクロール中にナビゲーションバーを確認してください!/p>
　　＜p>この部分をスクロールしてみて、スクロール中にナビゲーションバーを確認してください！　この部分をスクロールして、スクロール中にナビゲーションバーを確認してください!/p>
</div>
<div　id="section3"　class="container-fluid　bg-secondary"　style="padding-top:70px;padding-bottom:70px＞
　　<h1>セクション　3</h1>
　　＜p>この部分をスクロールしてみて、スクロール中にナビゲーションバーを確認してください！　この部分をスクロールして、スクロール中にナビゲーションバーを確認してください!/p>
　　＜p>この部分をスクロールしてみて、スクロール中にナビゲーションバーを確認してください！　この部分をスクロールして、スクロール中にナビゲーションバーを確認してください!/p>
</div>
<div　id="section41"　class="container-fluid　bg-danger"　style="padding-top:70px;padding-bottom:70px＞
　　<h1>セクション　4　サブメニュー　1</h1>
　　＜p>この部分をスクロールしてみて、スクロール中にナビゲーションバーを確認してください！　この部分をスクロールして、スクロール中にナビゲーションバーを確認してください!/p>
　　＜p>この部分をスクロールしてみて、スクロール中にナビゲーションバーを確認してください！　この部分をスクロールして、スクロール中にナビゲーションバーを確認してください!/p>
</div>
<div　id="section42"　class="container-fluid　bg-info"　style="padding-top:70px;padding-bottom:70px＞
　　<h1>セクション　4　サブメニュー　2</h1>
　　＜p>この部分をスクロールしてみて、スクロール中にナビゲーションバーを確認してください！　この部分をスクロールして、スクロール中にナビゲーションバーを確認してください!/p>
　　＜p>この部分をスクロールしてみて、スクロール中にナビゲーションバーを確認してください！　この部分をスクロールして、スクロール中にナビゲーションバーを確認してください!/p>
</div>
</body>
</html>
テストをしてみてください ‹/›

実行後の効果は以下の通りです:

例解析

監視したい要素（通常はbody）にdata-spy="scroll"を追加してください。

次にdata-target属性、その値はナビゲーションバーのidまたはclass (.navbar)です。これにより、スクロール可能なエリアと連携できます。

スクロール可能な要素のidに注意してください ＜div id="section"1＞）ナビゲーションバーのリンクオプションに一致する必要があります＜a href="#section"1">)。

可选项data-offset 属性用于计算滚动位置时，距离顶部的偏移像素。 默认为 10 px。

设置相对定位: 使用 data-spy="scroll" 的元素需要将其 CSS position 属性设置为 "relative" 才能起作用。

以下示例设置了垂直滚动监听：

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
　　<style>
　　body　{
　　　　　　position:　relative;
　　}
　　ul.nav-pills　{
　　　　　　top:　20px;
　　　　　　position:　fixed;
　　}
　　div.col-8　div　{
　　　　　　height:　500px;
　　}
　　</style>
</head>
<body　data-spy="scroll"　data-target="#myScrollspy"　data-offset="1">
<div　class="container-fluid">
　　<div　class="row">
　　　　<nav　class="col-sm-3　col-4"　id="myScrollspy">
　　　　　　<ul　class="nav　nav-pills　flex-column">
　　　　　　　　<li　class="nav-item">
　　　　　　　　　　<a　class="nav-link　active"　href="#section1">Section　1</a>
　　　　　　　　</li>
　　　　　　　　<li　class="nav-item">
　　　　　　　　　　<a　class="nav-link"　href="#section2">Section　2</a>
　　　　　　　　</li>
　　　　　　　　<li　class="nav-item">
　　　　　　　　　　<a　class="nav-link"　href="#section3">Section　3</a>
　　　　　　　　</li>
　　　　　　　　<li　class="nav-item　dropdown">
　　　　　　　　　　<a　class="nav-link　dropdown-toggle"　data-toggle="dropdown"　href="#">セクション　4</a>
　　　　　　　　　　<div　class="dropdown-menu">
　　　　　　　　　　　　<a　class="dropdown-item"　href="#section41">リンク　1</a>
　　　　　　　　　　　　<a　class="dropdown-item"　href="#section42">リンク　2</a>
　　　　　　　　　　</div>
　　　　　　　　</li>
　　　　　　</ul>
　　　　</nav>
　　　　<div　class="col-sm-9　col-8">
　　　　　　<div　id="section1"　class="bg-success">　　　　
　　　　　　　　<h1>セクション　1</h1>
　　　　　　　　<p>この部分をスrollして、スroll中にナビゲーションリストを確認してください!/p>
　　　　　　</div>
　　　　　　<div　id="section2"　class="bg-warning">　
　　　　　　　　<h1>セクション　2</h1>
　　　　　　　　<p>この部分をスrollして、スroll中にナビゲーションリストを確認してください!/p>
　　　　　　</div>　　　　　　　　
　　　　　　<div　id="section3"　class="bg-secondary">　　　　　　　　　
　　　　　　　　<h1>セクション　3</h1>
　　　　　　　　<p>この部分をスrollして、スroll中にナビゲーションリストを確認してください!/p>
　　　　　　</div>
　　　　　　<div　id="section41"　class="bg-danger">　　　　　　　　　
　　　　　　　　<h1>セクション　4-1</h1>
　　　　　　　　<p>この部分をスrollして、スroll中にナビゲーションリストを確認してください!/p>
　　　　　　</div>　　　　　　
　　　　　　<div　id="section42"　class="bg-info">　　　　　　　　　
　　　　　　　　<h1>セクション　4-2</h1>
　　　　　　　　<p>この部分をスrollして、スroll中にナビゲーションリストを確認してください!/p>
　　　　　　</div>
　　　　</div>
　　</div>
</div>
</body>
</html>
テストをしてみてください ‹/›

実行後の効果は以下の通りです:

Bootstrap4 ツールBootstrap4 ポップアップボックス