滾動(dòng)監(jiān)控（Scrollspy）
根據(jù)滾動(dòng)位置自動(dòng)更新Bootstrap 導(dǎo)航或列表組組件，以指示視口中當(dāng)前處于活動(dòng)狀態(tài)的鏈接。
工作原理
S滾動(dòng)監(jiān)控正常運(yùn)行的幾個(gè)要求：
- 必須使用在Bootstrap導(dǎo)航元件nav或列表群組list group.
- 滾動(dòng)監(jiān)控需要在被監(jiān)控的元素上設(shè)定position: relative；，通常是.
- 錨（a）是必要的，且必須指向到該元素的id.
成功運(yùn)行后，您的導(dǎo)航或列表群組將相應(yīng)更新，根據(jù)相對(duì)應(yīng)的目標(biāo)將.active從一個(gè)項(xiàng)目移動(dòng)到下一個(gè)項(xiàng)目。
可滾動(dòng)內(nèi)容與鍵盤(pán)兼容性
如果要制作可滾動(dòng)容器（body除外），請(qǐng)確定已經(jīng)設(shè)定height和overflow-y: scroll；旁邊帶有tabindex=“0”，以確保鍵盤(pán)兼容性。
導(dǎo)航欄中的示例
滾動(dòng)導(dǎo)航下方的塊，并查看active class的變化。下拉菜單項(xiàng)目也會(huì)顯示同樣效果
@fat
Placeholder content for the scrollspy example. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.
@mdo
Placeholder content for the scrollspy example. '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.
one
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
Placeholder content for the scrollspy example. If you wanna dance, if you want it all, you know that I'm the girl that you should call. Walk through the storm I would. So let me get you in your birthday suit. The one that got away. Last Friday night, yeah I think we broke the law, always say we're gonna stop. 'Cause she's a little bit of Yoko, And she's a little bit of 'Oh no'. I want the jaw droppin', eye poppin', head turnin', body shockin'. Yeah, we maxed our credit cards and got kicked out of the bar.
And some more placeholder content, for good measure.
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<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-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#one">one</a></li>
<li><a class="dropdown-item" href="#two">two</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#three">three</a></li>
</ul>
</li>
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="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>
嵌套導(dǎo)航示例
滾動(dòng)監(jiān)控也適用于嵌套的.nav。如果嵌套.nav是.active，它的父層也會(huì)是.active狀態(tài)。滾動(dòng)導(dǎo)航條旁的塊，并觀察它的active變化。
Item 1
Placeholder content for the scrollspy example. This one relates to item 1. 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.
Item 1-1
Placeholder content for the scrollspy example. This one relates to the item 1-1. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.
Item 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
Placeholder content for the scrollspy example. This one relates to item 3-2. You're original, cannot be replaced. All night they're playing, your song. California girls we're undeniable. Like a bird without a cage. There is no fear now, let go and just be free, I will love you unconditionally. I can see the writing on the wall. You could travel the world but nothing comes close to the golden coast.
<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 ms-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ms-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 ms-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
</nav>
</nav>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="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>
列表組示例
滾動(dòng)監(jiān)控同樣適用.list-group。滾動(dòng)列表群組旁邊的區(qū)域，并觀察active class變化。
Item 1
Placeholder content for the scrollspy list-group example. This one relates to item 1. 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. Thought that I was the exception.
Item 2
Placeholder content for the scrollspy list-group example. This one relates to item 2. Yeah, she dances to her own beat. Oh, no. You could've been the greatest. 'Cause, baby, you're a firework. Maybe a reason why all the doors are closed. Open up your heart and just let it begin. So très chic, yeah, she's a classic.
Item 3
Placeholder content for the scrollspy list-group example. This one relates to item 3. We go higher and higher. Never one without the other, we made a pact. I'm walking on air. Someone said you had your tattoo removed. Now I’m floating like a butterfly. Tone, tan fit and ready, turn it up cause its gettin' heavy. Cause once you’re mine, once you’re mine. You just gotta ignite the light and let it shine! So we hit the boulevard. Do you ever feel, feel so paper thin. I see it all, I see it now.
Item 4
Placeholder content for the scrollspy list-group example. This one relates to item 4. Summer after high school when we first met. There is no fear now, let go and just be free, I will love you unconditionally. Sun-kissed skin so hot we'll melt your popsicle. This love will make you levitate.
<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-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<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>
用法
通過(guò)數(shù)據(jù)屬性
要在您的導(dǎo)航條中加上滾動(dòng)監(jiān)控行為，只要將data-bs-spy=“scroll”加到您要監(jiān)控的元素（通常是body）。接著將data-bs-target屬性加入任何Bootstrap .nav元件的父元素ID或class。
body {
position: relative;
}
<body data-bs-spy="scroll" data-bs-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
通過(guò)JavaScript
在您的CSS加入position: relative；后，透過(guò)JavaScript調(diào)用滾動(dòng)監(jiān)控：
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
必須有可解析的ID目標(biāo)
導(dǎo)航連接并需有可解析的ID目標(biāo)。舉例來(lái)說(shuō)：<a href="#home">home</a>必須確實(shí)對(duì)應(yīng)到DOM中的<div id="home"></div>.
忽略不可見(jiàn)的目標(biāo)元素
不可見(jiàn)的目標(biāo)元素將被忽略，并和其對(duì)應(yīng)的導(dǎo)航也不會(huì)有高亮顯示效果。
方法
刷新
將滾動(dòng)監(jiān)控與新增或刪除DOM元素一起使用時(shí)，您需要像這樣調(diào)用refresh方法：
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
注銷
銷毀元素上的滾動(dòng)監(jiān)控。（刪除DOM元素上儲(chǔ)存的數(shù)據(jù)）
獲取實(shí)例
允許您取得滾動(dòng)監(jiān)控和DOM元素之間關(guān)聯(lián)實(shí)體的靜態(tài)方法。
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
選項(xiàng)
選項(xiàng)可以透過(guò)data屬性或是JavaScript傳遞。像是data屬性，增加選項(xiàng)名稱到data-bs-，例如：data-bs-offset=“”.
| Name | Type | Default | Description |
|---|---|---|---|
offset |
number | 10 |
計(jì)算滾動(dòng)監(jiān)控的和頂部的偏移量 |
method |
string | auto |
查找監(jiān)控元素所在的部分，auto將選擇最好的方法來(lái)獲得滾動(dòng)坐標(biāo)。offset將使用Element.getBoundingClientRect（）方法來(lái)取得滾動(dòng)坐標(biāo)。position將會(huì)使用HTMLElement.offsetTop和HTMLElement.offsetLeft屬性來(lái)取得滾動(dòng)坐標(biāo)。 Element.getBoundingClientRect()
HTMLElement.offsetTop
and HTMLElement.offsetLeft
|
target |
string | jQuery object | DOM element | 指定特定元素套用滾動(dòng)監(jiān)控套件。 |
事件
| Event type | Description |
|---|---|
activate.bs.scrollspy |
每當(dāng)一個(gè)新的元素啟用滾動(dòng)監(jiān)控，這個(gè)事件會(huì)在監(jiān)控元素上被觸發(fā)。 |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})