English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
スクロールリスナー（Scrollspy）プラグイン、自動更新ナビゲーションプラグインは、スクロールバーの位置に応じて、ナビゲーションのターゲットを自動的に更新します。基本的な実装では、スクロールに応じて、ナビゲーションバーにスクロールバーの位置に基づいて追加します .active class。
プラグインの機能を単独で参照したい場合は、以下を参照する必要があります scrollspy.js。または、以下のように Bootstrapプラグイン概要 第章で言及されているように、以下を参照できます bootstrap.js または圧縮版の bootstrap.min.js。
トップナビゲーションにスクロールリスナーを追加できます：
data属性を通じて：監視したい要素（通常はbody）に追加 data-spy="scroll"。それから、Bootstrapを持つ .nav コンポーネントの親要素のIDまたはclass属性 data-target。これが正常に動作するためには、ページのメイン部分に監視するリンクのIDに一致する要素があることを確認する必要があります。
<body data-spy="scroll" data-target=".navbar-example"> ... <div> <ul> ... </ul> </div> ... </body>
通过 JavaScript：スクロールリスナーをJavaScriptで呼び出し、監視する要素を選択し、以下を呼び出します .scrollspy() 関数：
$('body').scrollspy({ target: '.navbar-example' })以下の例では、data属性を使用してスクロールリスナー（Scrollspy）プラグインを使用する方法を示しています：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap サンプル - スクロールリスナー（Scrollspy）プラグイン</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy"> <span class="sr-only">切り替えナビ</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">教材名</a> </div> <div class="collapse navbar-collapse bs-js-navbar-scrollspy"> <ul class="nav navbar-nav"> <li><a href="#ios">iOS</a></li> <li><a href="#svn">SVN</a></li> <li class="dropdown"> <a href="#" id="navbarDrop1class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1"> <li><a href="#jmeter" tabindex="-1">jmeter</a></li> <li><a href="#ejb" tabindex="-1">ejb</a></li> <li class="divider"></li> <li><a href="#spring" tabindex="-1">spring</a></li> </ul> </li> </ul> </div> </div> </nav> <div data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height:200px;overflow:auto; position: relative;"> <h4 id="ios">iOS</h4> <p>iOSは、Apple社が開発およびリリースしたモバイルオペレーティングシステムです。最初は 2007 年に初めてリリースされたiPhone、iPod Touch、およびApple TV。iOSはOSXから派生しており、Darwinベースを共有しています。OSXオペレーティングシステムはアップルコンピュータ上で使用され、iOSはアップルのモバイルバージョンです。 </p> <h4 id="svn">SVN</h4> <p>Apache Subversion、通常SVNと略される、はオープンソースのバージョン管理システムソフトウェアです。SubversionはCollabNet社によって 2000年に作成されましたが、今ではApache Software Foundationのプロジェクトの一つとなり、豊富な開発者とユーザーコミュニティを持っています。 </p> <h4 id="jmeter">jMeter</h4> <p>jMeterはオープンソースのテストソフトウェアです。それは 100%純Javaアプリケーションで、負荷とパフォーマンステストに使用されます。 </p> <h4 id="ejb">EJB</h4> <p>Enterprise Java Beans(EJB)は、高度な拡張性と強力なエンタープライズアプリケーションの開発アーキテクチャで、JBOSS、Web Logicなどのコンパチブルなアプリケーションサーバー上でデプロイされます。2EE上。 </p> <h4 id="spring">Spring</h4> <p>Springフレームワークは、強力なJavaアプリケーションを迅速に開発するための完全なインフラを提供するオープンソースのJavaプラットフォームです。 </p> <p>Spring フレームワークは最初にRod Johnsonによって書かれ、 2003 年 6 月に初めてリリースされたApache 2.0 ライセンス下。 </p> </div> </body> </html>テストして見て‹/›
以下の結果が得られます：
data属性またはJavaScriptを通じて伝達されます。以下のテーブルにはこれらのオプションが示されています：
| オプション名 | タイプ/デフォルト値 | Data属性名 | 説明 |
|---|---|---|---|
| offset | number デフォルト値：10 | data-offset | スクロール位置を計算する際に、トップからのオフセットピクセル数。 |
.scrollspy('refresh')：スクロールリスナー方法をJavaScriptで呼び出す場合、以下の .refresh メソッドを使用してDOMを更新します。DOMの任意の要素が変更された場合（つまり、要素を追加または削除した場合）、非常に役立ちます。以下は、このメソッドを使用するための文法です。
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')}
});以下の例では、 .scrollspy('refresh') メソッドの使い方：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap サンプル - スクロールリスナー（Scrollspy）プラグインのメソッド</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav id="myScrollspy" class="navbar navbar-default navbar-static" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse"
data-target=".bs-js-navbar-scrollspy">
<span class="sr-only">切り替えナビ</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">教材名</a>
</div>
<div class="collapse navbar-collapse bs-js-navbar-scrollspy">
<ul class="nav navbar-nav">
<li class="active"><a href="#ios">iOS</a></li>
<li><a href="#svn">SVN</a></li>
<li class="dropdown">
<a href="#" id="navbarDrop1class="dropdown-toggle"
data-toggle="dropdown">Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu"
aria-labelledby="navbarDrop1">
<li><a href="#jmeter" tabindex="-1">jmeter</a></li>
<li><a href="#ejb" tabindex="-1">ejb</a></li>
<li class="divider"></li>
<li><a href="#spring" tabindex="-1">spring</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div data-spy="scroll" data-target="#myScrollspy" data-offset="0"
style="height:200px;overflow:auto; position: relative;">
<div class="section">
<h4 iOS</small><a href="#" onclick="removeSection(this);">
× この部分を削除</a></small>
</h4>
<p>iOSは、Apple社が開発およびリリースしたモバイルオペレーティングシステムです。最初は 2007 年に初めてリリースされたiPhone、iPod Touch、およびApple
TV。iOSはOS Xを派生しており、Darwinの基本を共有しています。OS XはAppleコンピュータで使用されるオペレーティングシステムであり、iOSはAppleのモバイル版です。/p>
</div>
<div class="section">
<h4 id="svn">SVN<small>/small>/h4>
<p>Apache Subversion、通常SVNと略される、はオープンソースのバージョン管理システムソフトウェアです。SubversionはCollabNet社によって 2000年に作成されました。しかし今ではそれがApache Software Foundationのプロジェクトの一つとなり、豊富な開発者とユーザーコミュニティを持っています。/p>
</div>
<div class="section">
<h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);">
× この部分を削除</a></small>
</h4>
<p>jMeterはオープンソースのテストソフトウェアです。それは 100% 純 Javaアプリケーションで、負荷とパフォーマンステストに使用されます。/p>
</div>
<div class="section">
<h4 id="ejb">EJB</h4>
<p>Enterprise Java Beans(EJB)は、高度な拡張性と強力なエンタープライズアプリケーションの開発アーキテクチャで、JBOSS、Web Logicなどのコンパチブルなアプリケーションサーバー上でデプロイされます。2EE 上。</p>
</div>
<div class="section">
<h4 id="spring">Spring</h4>
<p>Spring フレームワークはオープンソースのJavaプラットフォームで、強力なJavaアプリケーションの迅速な開発に必要な完全なインフラストラクチャサポートを提供します。</p>
<p>Spring フレームワークは最初にRod Johnsonによって書かれ、 2003 年 6 月に初めてリリースされたApache 2.0 ライセンス下。</p>
</div>
</div>
<script type="text/javascript">
$(function(){
removeSection = function(e) {
$(e).parents(".section").remove();
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')}
});
}
$("#myScrollspy").scrollspy();
});
</script>
</body>
</html>テストして見て‹/›以下の結果が得られます：
以下のテーブルには、スクロールリスナーで使用するイベントが示されています。これらのイベントは、関数内でフックとして使用できます。
| イベント | 説明 | サンプル |
|---|---|---|
| activate.bs.scrollspy | 新しいプロジェクトがスクロールリスナーでアクティブ化されたときに、このイベントがトリガーされます。 | $('#myScrollspy').on('activate.bs.scrollspy', function () {
// アクションを実行します...
}); |
以下の例では、 activate.bs.scrollspy イベントの使い方：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap サンプル - スクロールリスナー（Scrollspy）プラグインのイベント</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav id="myScrollspy" class="navbar navbar-default navbar-static" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse"
data-target=".bs-js-navbar-scrollspy">
<span class="sr-only">切り替えナビ</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">教材名</a>
</div>
<div class="collapse navbar-collapse bs-js-navbar-scrollspy">
<ul class="nav navbar-nav">
<li class="active"><a href="#ios">iOS</a></li>
<li><a href="#svn">SVN</a></li>
<li class="dropdown">
<a href="#" id="navbarDrop1class="dropdown-toggle"
data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu"
aria-labelledby="navbarDrop1">
<li><a href="#jmeter" tabindex="-1">jmeter</a></li>
<li><a href="#ejb" tabindex="-1">ejb</a></li>
<li class="divider"></li>
<li><a href="#spring" tabindex="-1">spring</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div data-spy="scroll" data-target="#myScrollspy" data-offset="0"
style="height:200px;overflow:auto; position: relative;">
<div class="section">
<h4 iOS</small><a href="#" onclick="removeSection(this);">
× この部分を削除</a></small>
</h4>
<p>iOSは、Apple社が開発およびリリースしたモバイルオペレーティングシステムです。最初は 2007 年に初めてリリースされたiPhone、iPod Touch、およびApple
TV。iOSはOS Xを派生しており、Darwinの基本を共有しています。OS XはAppleコンピュータで使用されるオペレーティングシステムであり、iOSはAppleのモバイル版です。/p>
</div>
<div class="section">
<h4 id="svn">SVN<small>/small>/h4>
<p>Apache Subversion、通常SVNと略される、はオープンソースのバージョン管理システムソフトウェアです。SubversionはCollabNet社によって 2000年に作成されました。しかし今ではそれがApache Software Foundationのプロジェクトの一つとなり、豊富な開発者とユーザーコミュニティを持っています。/p>
</div>
<div class="section">
<h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);">
× この部分を削除</a></small>
</h4>
<p>jMeterはオープンソースのテストソフトウェアです。それは 100% 純 Javaアプリケーションで、負荷とパフォーマンステストに使用されます。/p>
</div>
<div class="section">
<h4 id="ejb">EJB</h4>
<p>Enterprise Java Beans(EJB)は、高度な拡張性と強力なエンタープライズアプリケーションの開発アーキテクチャで、JBOSS、Web Logicなどのコンパチブルなアプリケーションサーバー上でデプロイされます。2EE 上。</p>
</div>
<div class="section">
<h4 id="spring">Spring</h4>
<p>Spring フレームワークはオープンソースのJavaプラットフォームで、強力なJavaアプリケーションの迅速な開発に必要な完全なインフラストラクチャサポートを提供します。</p>
<p>Spring フレームワークは最初にRod Johnsonによって書かれ、 2003 年 6 月に初めてリリースされたApache 2.0 ライセンス下。</p>
</div>
</div>
<span id="activeitem" style="color:red;"></span>
<script type="text/javascript">
$(function(){
removeSection = function(e) {
$(e).parents(".section").remove();
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')}
});
}
$("#myScrollspy").scrollspy();
$('#myScrollspy').on('activate.bs.scrollspy', function () {
var currentItem = $(".nav li.active > a").text();
$("#activeitem").html("現在、ご覧いただいているのは - " + currentItem);
});
});
</script>
</body>
</html>テストして見て‹/›以下の結果が得られます：
以下のサンプルでは、水平スrollリスナーの作成方法を示します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device"-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1">セクション 1</a></li>
<li><a href="#section2">セクション 2</a></li>
<li><a href="#section3">セクション 3</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">セクション 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section41">セクション 4-1</a></li>
<li><a href="#section42">セクション 4-2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="section1" class="container-fluid">
<h1>セクション 1</h1>
<p>この部分をスクロールしてみて、ナビゲーションバーがスクロールする時に確認してください！この部分をスクロールして、ナビゲーションバーがスクロールする時に確認してください!</p>
<p>この部分をスクロールしてみて、ナビゲーションバーがスクロールする時に確認してください！この部分をスクロールして、ナビゲーションバーがスクロールする時に確認してください!</p>
</div>
<div id="section2" class="container-fluid">
<h1>セクション 2</h1>
<p>この部分をスクロールしてみて、ナビゲーションバーがスクロールする時に確認してください！この部分をスクロールして、ナビゲーションバーがスクロールする時に確認してください!</p>
<p>この部分をスクロールしてみて、ナビゲーションバーがスクロールする時に確認してください！この部分をスクロールして、ナビゲーションバーがスクロールする時に確認してください!</p>
</div>
<div id="section3" class="container-fluid">
<h1>セクション 3</h1>
<p>この部分をスクロールしてみて、ナビゲーションバーがスクロールする時に確認してください！この部分をスクロールして、ナビゲーションバーがスクロールする時に確認してください!</p>
<p>この部分をスクロールしてみて、ナビゲーションバーがスクロールする時に確認してください！この部分をスクロールして、ナビゲーションバーがスクロールする時に確認してください!</p>
</div>
<div id="section41" class="container-fluid">
<h1>セクション 4 サブメニュー 1</h1>
<p>この部分をスクロールしてみて、ナビゲーションバーがスクロールする時に確認してください！この部分をスクロールして、ナビゲーションバーがスクロールする時に確認してください!</p>
<p>この部分をスクロールしてみて、ナビゲーションバーがスクロールする時に確認してください！この部分をスクロールして、ナビゲーションバーがスクロールする時に確認してください!</p>
</div>
<div id="section42" class="container-fluid">
<h1>セクション 4 サブメニュー 2</h1>
<p>この部分をスクロールしてみて、ナビゲーションバーがスクロールする時に確認してください！この部分をスクロールして、ナビゲーションバーがスクロールする時に確認してください!</p>
<p>この部分をスクロールしてみて、ナビゲーションバーがスクロールする時に確認してください！この部分をスクロールして、ナビゲーションバーがスクロールする時に確認してください!</p>
</div>
</body>
</html>テストして見て‹/›以下のサンプルでは、垂直スrollリスナーの作成方法を示します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap サンプル</title>
<meta name="viewport" content="width=device"-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
}
ul.nav-pills {
top: 20px;
position: fixed;
}
div.col-sm-9 div {
height: 250px;
font-size: 28px;
}
#section1 {color: #fff; background-color: #1E88E5;}
#section2 {color: #fff; background-color: #673ab7;}
#section3 {color: #fff; background-color: #ff9800;}
#section41 {color: #fff; background-color: #00bcd4;}
#section42 {color: #fff; background-color: #009688;}
@media screen and (max-width: 810px) {
#section1, #section2, #section3, #section41, #section42 {
margin-left: 150px;
}
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<div class="container-fluid">
<div class="container-fluid">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#section1">セクション 1</a></li>
<li><a href="#section2">セクション 2</a></li>
<li><a href="#section3">セクション 3</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">セクション 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section41">セクション 4-1</a></li>
<li><a href="#section42">セクション 4-2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1>セクション 1</h1>
<p>この部分をスクロールして、スクロール中にナビゲーションリストを確認してください!/p>
</div>
<div id="section2">
<h1>セクション 2</h1>
<p>この部分をスクロールして、スクロール中にナビゲーションリストを確認してください!/p>
</div>
<div id="section3">
<h1>セクション 3</h1>
<p>この部分をスクロールして、スクロール中にナビゲーションリストを確認してください!/p>
</div>
<div id="section41">
<h1>セクション 4-1</h1>
<p>この部分をスクロールして、スクロール中にナビゲーションリストを確認してください!/p>
</div>
<div id="section42">
<h1>セクション 4-2</h1>
<p>この部分をスクロールして、スクロール中にナビゲーションリストを確認してください!/p>
</div>
</div>
</div>
</div>
</body>
</html>テストして見て‹/›