スクロールスパイ
ビューポートで現在アクティブなリンクを示すために、スクロール位置に基づいて Bootstrap ナビゲーションまたはリスト グループ コンポーネントを自動的に更新します。
使い方
Scrollspy が正しく機能するには、いくつかの要件があります。
- JavaScript をソースからビルドする場合は
util.js、 . - Bootstrap nav コンポーネントまたはリスト グループで使用する必要があります。
- Scrollspy は
position: relative;、スパイしている要素、通常は<body>. - 以外の要素をスパイするときは
<body>、必ずheightセットしてoverflow-y: scroll;適用してください。 - アンカー (
<a>) が必要であり、それを持つ要素を指している必要がありidます。
正常に実装されると、それに応じてナビゲーションまたはリスト グループが更新さ.activeれ、関連するターゲットに基づいてクラスが 1 つのアイテムから次のアイテムに移動します。
ナビゲーションバーの例
ナビゲーションバーの下の領域をスクロールして、アクティブなクラスの変化を確認します。ドロップダウン項目も強調表示されます。
@太い
scrollspy の例のプレースホルダー コンテンツ。あなたは最高の建築を手に入れました。パスポートのスタンプ、彼女はコスモポリタンです。素晴らしく、新鮮で、激しい、ロックでそれを手に入れました。いつかあなたを失うとは思ってもいなかった。彼女はあなたの心を食べ尽くします。あなたのキスは宇宙的で、すべての動きは魔法です。私はそれらのものを意味します、私は彼女がそのようなものであるように意味します. こんにちは愛する人たち、旅に出ましょう。7 月 4 日のように夜を楽しみましょう! しかし、あなたはむしろ無駄になりたいです。
@mdo
scrollspy の例のプレースホルダー コンテンツ。彼女はミューズでありアーティストなのですから。（これが私たちのやり方です）だから、魔法で遊びたいです。ですから、すべてを私に渡す前に、必ず確認してください。私は歩いています、私は空中を歩いています（今夜）。話をスキップして、すべてを聞いて、散歩に出かけましょう。
1
Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.
two
Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.
three
scrollspy の例のプレースホルダー コンテンツ。踊りたいなら、すべてが欲しいなら、私はあなたが呼ぶべき女の子だと知っています。嵐の中を歩きます。では、誕生日のスーツを着させてください。逃してしまった人。先週の金曜日の夜、ええ、私たちは法律を破ったと思います。いつもやめると言っています。彼女はヨーコに少し似ていて、そして彼女はちょっと「オー・ノー」に似ているから。私はあごのドロップピン、アイポッピン、ヘッドターニング、ボディショッキングが欲しい. ええ、私たちはクレジット カードを使い果たし、バーから追い出されました。
そして、適切な尺度として、いくつかのプレースホルダーコンテンツ。
<nav id="navbar-example2" class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#fat">@fat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">@mdo</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#one">one</a>
<a class="dropdown-item" href="#two">two</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#three">three</a>
</div>
</li>
</ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
<h4 id="fat">@fat</h4>
<p>...</p>
<h4 id="mdo">@mdo</h4>
<p>...</p>
<h4 id="one">one</h4>
<p>...</p>
<h4 id="two">two</h4>
<p>...</p>
<h4 id="three">three</h4>
<p>...</p>
</div>
ネストされたナビゲーションの例
Scrollspy はネストされた.navs でも動作します。ネストされた.navがの場合.active、その親も になります.active。ナビゲーション バーの横の領域をスクロールして、アクティブなクラスの変化を確認します。
アイテム1
scrollspy の例のプレースホルダー コンテンツ。これは項目 1 に関連しています。彼女は国際色豊かな笑顔を持っているので、あなたを高く、とても高く連れて行きます。私のベッドには見知らぬ人がいて、頭がドキドキしています。大野。別の人生では、私はあなたをとどまらせます。私は何でもできるから。私の最高の戦いにふさわしい。両親の酒を盗んで屋根に登っていた。トーン、日焼けフィットと準備ができて、それを上げて、重くなってください。彼女の愛は麻薬のようなものです。選択肢があることを忘れていたと思います。
項目1-1
scrollspy の例のプレースホルダー コンテンツ。これは項目 1-1 に関連しています。あなたは最高の建築を手に入れました。パスポートのスタンプ、彼女はコスモポリタンです。素晴らしく、新鮮で、激しい、ロックでそれを手に入れました。いつかあなたを失うとは思ってもいなかった。彼女はあなたの心を食べ尽くします。あなたのキスは宇宙的で、すべての動きは魔法です。私はそれらのものを意味します、私は彼女がそのようなものであるように意味します. こんにちは愛する人たち、旅に出ましょう。7 月 4 日のように夜を楽しみましょう! しかし、あなたはむしろ無駄になりたいです。
項目1-2
Placeholder content for the scrollspy example. This one relates to the item 1-2. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.
Item 2
Placeholder content for the scrollspy example. This one relates to item 2. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. No, no, no, no. Thought that I was the exception.
Item 3
Placeholder content for the scrollspy example. This one relates to item 3. Word on the street, you got somethin' to show me, me. All this money can't buy me a time machine. Make it like your birthday everyday. So we hit the boulevard. You make me feel like I'm livin' a teenage dream, the way you turn me on Skip the talk, heard it all, time to walk the walk. Word on the street, you got somethin' to show me, me. It's no big deal, it's no big deal, it's no big deal.
Item 3-1
Placeholder content for the scrollspy example. This one relates to item 3-1. Baby do you dare to do this? This is no big deal. Yeah, you're lucky if you're on her plane. Just own the night like the 4th of July! Standing on the frontline when the bombs start to fall. So just be sure before you give it all to me.
Item 3-2
scrollspy の例のプレースホルダー コンテンツ。これは項目 3-2 に関連しています。あなたはオリジナルであり、交換することはできません。彼らは一晩中、あなたの歌を演奏しています。カリフォルニアの女の子は否定できません。かごのない鳥のように。もう恐れはありません、手放して自由になってください、私は無条件にあなたを愛します。壁に文字が見えます。世界中を旅することはできますが、黄金の海岸に近づくものはありません。
<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" href="#item-1">Item 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Item 2</a>
<a class="nav-link" href="#item-3">Item 3</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
</nav>
</nav>
</nav>
<div data-spy="scroll" data-target="#navbar-example3" data-offset="0">
<h4 id="item-1">Item 1</h4>
<p>...</p>
<h5 id="item-1-1">Item 1-1</h5>
<p>...</p>
<h5 id="item-1-2">Item 1-2</h5>
<p>...</p>
<h4 id="item-2">Item 2</h4>
<p>...</p>
<h4 id="item-3">Item 3</h4>
<p>...</p>
<h5 id="item-3-1">Item 3-1</h5>
<p>...</p>
<h5 id="item-3-2">Item 3-2</h5>
<p>...</p>
</div>
リストグループの例
Scrollspy は.list-groups でも動作します。リスト グループの横の領域をスクロールして、アクティブなクラスの変化を確認します。
アイテム1
scrollspy リスト グループの例のプレースホルダー コンテンツ。これは項目 1 に関連しています。謝罪は必要ありません。もう恐れはありません、手放して自由になってください、私は無条件にあなたを愛します。先週の金曜日の夜。恥ずかしがり屋の男にならないでくださいきっと美しいでしょう。初めて会った高校卒業後の夏。彼女はミューズでありアーティストなのですから。何？待って。私は例外だと思っていました。
項目 2
scrollspy リスト グループの例のプレースホルダー コンテンツ。これは項目 2 に関連しています。ええ、彼女は自分のビートに合わせて踊っています。大野。あなたは最高だったかもしれません。ベイビー、あなたは花火だから。すべてのドアが閉まっている理由かもしれません。心を開いて、始めましょう。シックで、ええ、彼女はクラシックです。
アイテム3
scrollspy リスト グループの例のプレースホルダー コンテンツ。これは項目 3 に関連しています。お互いがいないということは決してありません、私たちは協定を結びました。空の上を歩いています。誰かがあなたのタトゥーを取り除いたと言いました。今、私は蝶のように浮いています。トーン、日焼けフィットと準備ができて、それを上げて、重くなってください。あなたが私のものになったら、あなたが私のものになったら。光に火をつけて輝かせるだけです！それで、大通りに出ました。紙のように薄いと感じたことはありますか。私はそれをすべて見ます、私は今それを見ます。
項目4
scrollspy リスト グループの例のプレースホルダー コンテンツ。これは項目4に関連しています。私たちが最初に会った高校の後の夏。もう恐れはありません、手放して自由になってください、私は無条件にあなたを愛します。日焼けした肌はとても熱く、アイスキャンディーが溶けてしまいます。この愛はあなたを浮かび上がらせます。
<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
<h4 id="list-item-1">Item 1</h4>
<p>...</p>
<h4 id="list-item-2">Item 2</h4>
<p>...</p>
<h4 id="list-item-3">Item 3</h4>
<p>...</p>
<h4 id="list-item-4">Item 4</h4>
<p>...</p>
</div>
使用法
データ属性経由
scrollspy 動作をトップバー ナビゲーションに簡単に追加するdata-spy="scroll"には、スパイしたい要素 (最も一般的には<body>) に追加します。次に、Bootstrapコンポーネントdata-targetの親要素の ID またはクラスを持つ属性を追加します。.nav
body {
position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
JavaScript 経由
CSSを追加position: relative;したら、JavaScript 経由で scrollspy を呼び出します。
$('body').scrollspy({ target: '#navbar-example' })
解決可能な ID ターゲットが必要
Navbar リンクには、解決可能な ID ターゲットが必要です。たとえば、 a<a href="#home">home</a>は DOM のようなものに対応している必要があります<div id="home"></div>。
非:visibleターゲット要素は無視されました
:visiblejQuery に準拠していないターゲット要素は無視され、対応するナビゲーション アイテムが強調表示されることはありません。
メソッド
.scrollspy('refresh')
scrollspy を DOM からの要素の追加または削除と組み合わせて使用する場合、次のように refresh メソッドを呼び出す必要があります。
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})
.scrollspy('dispose')
要素の scrollspy を破棄します。
オプション
オプションは、データ属性または JavaScript を介して渡すことができます。data-データ属性の場合、オプション名をのようにに追加しますdata-offset=""。
| 名前 | タイプ | デフォルト | 説明 |
|---|---|---|---|
| オフセット | 番号 | 10 | スクロールの位置を計算するときに上からオフセットするピクセル。 |
| 方法 | ストリング | 自動 | スパイされた要素がどのセクションにあるかを見つけautoます。スクロール座標を取得するための最良の方法を選択します。offsetjQuery オフセット メソッドを使用してスクロール座標を取得します。positionjQuery position メソッドを使用してスクロール座標を取得します。 |
| 目標 | 文字列 | jQuery オブジェクト | DOM 要素 | Scrollspy プラグインを適用する要素を指定します。 |
イベント
| イベントタイプ | 説明 |
|---|---|
| activate.bs.scrollspy | このイベントは、スクロールスパイによって新しいアイテムがアクティブになるたびに、スクロール要素で発生します。 |
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
// do something...
})