Scrollspy
Hloov kho Bootstrap navigation lossis sau npe pawg raws li txoj haujlwm scroll los qhia tias qhov txuas twg tam sim no muaj nyob hauv qhov chaw saib.
Nws ua haujlwm li cas
Scrollspy muaj ob peb yam yuav tsum ua kom zoo:
- Nws yuav tsum tau siv rau ntawm Bootstrap nav tivthaiv lossis npe pawg .
- Scrollspy xav tau
position: relative;
ntawm lub caij koj tab tom spying rau, feem ntau yog<body>
. - Anchors (
<a>
) yuav tsum tau thiab yuav tsum taw tes rau ib lub ntsiab nrog qhov ntawdid
.
Thaum ua tiav tiav, koj pawg nav lossis cov npe yuav hloov kho raws li, txav .active
chav kawm los ntawm ib yam khoom mus rau tom ntej raws li lawv cov hom phiaj cuam tshuam.
Scrollable ntim thiab cov keyboard nkag
Yog tias koj tab tom ua ib lub thawv scrollable (tshwj tsis yog lub <body>
), nco ntsoov tias muaj ib qho height
teeb tsa thiab overflow-y: scroll;
siv rau nws-nrog tabindex="0"
rau kom paub meej cov keyboard nkag.
Piv txwv hauv navbar
Scroll thaj tsam hauv qab ntawm navbar thiab saib qhov hloov pauv hauv chav kawm. Cov khoom poob qis yuav raug pom zoo ib yam.
Thawj nqe lus
Nov yog qee qhov chaw muab cov ntsiab lus rau nplooj ntawv scrollspy. Nco ntsoov tias thaum koj nqes mus rau nplooj ntawv, qhov tsim nyog navigation txuas yog tseem ceeb. Nws rov ua dua thoob plaws hauv qhov piv txwv. Peb pheej ntxiv qee qhov piv txwv ntxiv ntawm no los hais txog qhov scrolling thiab highlighting.
Ob nqe lus
Nov yog qee qhov chaw muab cov ntsiab lus rau nplooj ntawv scrollspy. Nco ntsoov tias thaum koj nqes mus rau nplooj ntawv, qhov tsim nyog navigation txuas yog tseem ceeb. Nws rov ua dua thoob plaws hauv qhov piv txwv. Peb pheej ntxiv qee qhov piv txwv ntxiv ntawm no los hais txog qhov scrolling thiab highlighting.
Peb lub taub hau
Nov yog qee qhov chaw muab cov ntsiab lus rau nplooj ntawv scrollspy. Nco ntsoov tias thaum koj nqes mus rau nplooj ntawv, qhov tsim nyog navigation txuas yog tseem ceeb. Nws rov ua dua thoob plaws hauv qhov piv txwv. Peb pheej ntxiv qee qhov piv txwv ntxiv ntawm no los hais txog qhov scrolling thiab highlighting.
Plaub nqe lus
Nov yog qee qhov chaw muab cov ntsiab lus rau nplooj ntawv scrollspy. Nco ntsoov tias thaum koj nqes mus rau nplooj ntawv, qhov tsim nyog navigation txuas yog tseem ceeb. Nws rov ua dua thoob plaws hauv qhov piv txwv. Peb pheej ntxiv qee qhov piv txwv ntxiv ntawm no los hais txog qhov scrolling thiab highlighting.
Tshooj tsib
Nov yog qee qhov chaw muab cov ntsiab lus rau nplooj ntawv scrollspy. Nco ntsoov tias thaum koj nqes mus rau nplooj ntawv, qhov tsim nyog navigation txuas yog tseem ceeb. Nws rov ua dua thoob plaws hauv qhov piv txwv. Peb pheej ntxiv qee qhov piv txwv ntxiv ntawm no los hais txog qhov scrolling thiab highlighting.
<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="#scrollspyHeading1">First</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">Second</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">
<li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
<li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
</ul>
</li>
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<h4 id="scrollspyHeading1">First heading</h4>
<p>...</p>
<h4 id="scrollspyHeading2">Second heading</h4>
<p>...</p>
<h4 id="scrollspyHeading3">Third heading</h4>
<p>...</p>
<h4 id="scrollspyHeading4">Fourth heading</h4>
<p>...</p>
<h4 id="scrollspyHeading5">Fifth heading</h4>
<p>...</p>
</div>
Piv txwv nrog nested nav
Scrollspy kuj ua haujlwm nrog nested .nav
s. Yog ib lub zes .nav
, .active
nws niam nws txiv kuj yuav .active
. Scroll qhov chaw nyob ib sab ntawm lub navbar thiab saib qhov hloov pauv hauv chav kawm.
Yam khoom 1
Nov yog qee qhov chaw muab cov ntsiab lus rau nplooj ntawv scrollspy. Nco ntsoov tias thaum koj nqes mus rau nplooj ntawv, qhov tsim nyog navigation txuas yog tseem ceeb. Nws rov ua dua thoob plaws hauv qhov piv txwv. Peb pheej ntxiv qee qhov piv txwv ntxiv ntawm no los hais txog qhov scrolling thiab highlighting.
Nqe 1-1
Nov yog qee qhov chaw muab cov ntsiab lus rau nplooj ntawv scrollspy. Nco ntsoov tias thaum koj nqes mus rau nplooj ntawv, qhov tsim nyog navigation txuas yog tseem ceeb. Nws rov ua dua thoob plaws hauv qhov piv txwv. Peb pheej ntxiv qee qhov piv txwv ntxiv ntawm no los hais txog qhov scrolling thiab highlighting.
Nqe 1-2
Nov yog qee qhov chaw muab cov ntsiab lus rau nplooj ntawv scrollspy. Nco ntsoov tias thaum koj nqes mus rau nplooj ntawv, qhov tsim nyog navigation txuas yog tseem ceeb. Nws rov ua dua thoob plaws hauv qhov piv txwv. Peb pheej ntxiv qee qhov piv txwv ntxiv ntawm no los hais txog qhov scrolling thiab highlighting.
Yam khoom 2
Nov yog qee qhov chaw muab cov ntsiab lus rau nplooj ntawv scrollspy. Nco ntsoov tias thaum koj nqes mus rau nplooj ntawv, qhov tsim nyog navigation txuas yog tseem ceeb. Nws rov ua dua thoob plaws hauv qhov piv txwv. Peb pheej ntxiv qee qhov piv txwv ntxiv ntawm no los hais txog qhov scrolling thiab highlighting.
Yam khoom 3
Nov yog qee qhov chaw muab cov ntsiab lus rau nplooj ntawv scrollspy. Nco ntsoov tias thaum koj nqes mus rau nplooj ntawv, qhov tsim nyog navigation txuas yog tseem ceeb. Nws rov ua dua thoob plaws hauv qhov piv txwv. Peb pheej ntxiv qee qhov piv txwv ntxiv ntawm no los hais txog qhov scrolling thiab highlighting.
Nqe 3-1
Nov yog qee qhov chaw muab cov ntsiab lus rau nplooj ntawv scrollspy. Nco ntsoov tias thaum koj nqes mus rau nplooj ntawv, qhov tsim nyog navigation txuas yog tseem ceeb. Nws rov ua dua thoob plaws hauv qhov piv txwv. Peb pheej ntxiv qee qhov piv txwv ntxiv ntawm no los hais txog qhov scrolling thiab highlighting.
Nqe 3-2
Nov yog qee qhov chaw muab cov ntsiab lus rau nplooj ntawv scrollspy. Nco ntsoov tias thaum koj nqes mus rau nplooj ntawv, qhov tsim nyog navigation txuas yog tseem ceeb. Nws rov ua dua thoob plaws hauv qhov piv txwv. Peb pheej ntxiv qee qhov piv txwv ntxiv ntawm no los hais txog qhov scrolling thiab highlighting.
<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
<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>
Piv txwv nrog cov npe-pab pawg
Scrollspy kuj ua haujlwm nrog .list-group
s. Scroll qhov chaw nyob ib sab ntawm cov npe pawg thiab saib cov chav kawm hloov pauv.
Yam khoom 1
Nov yog qee qhov chaw muab cov ntsiab lus rau nplooj ntawv scrollspy. Nco ntsoov tias thaum koj nqes mus rau nplooj ntawv, qhov tsim nyog navigation txuas yog tseem ceeb. Nws rov ua dua thoob plaws hauv qhov piv txwv. Peb pheej ntxiv qee qhov piv txwv ntxiv ntawm no los hais txog qhov scrolling thiab highlighting.
Yam khoom 2
Nov yog qee qhov chaw muab cov ntsiab lus rau nplooj ntawv scrollspy. Nco ntsoov tias thaum koj nqes mus rau nplooj ntawv, qhov tsim nyog navigation txuas yog tseem ceeb. Nws rov ua dua thoob plaws hauv qhov piv txwv. Peb pheej ntxiv qee qhov piv txwv ntxiv ntawm no los hais txog qhov scrolling thiab highlighting.
Yam khoom 3
Nov yog qee qhov chaw muab cov ntsiab lus rau nplooj ntawv scrollspy. Nco ntsoov tias thaum koj nqes mus rau nplooj ntawv, qhov tsim nyog navigation txuas yog tseem ceeb. Nws rov ua dua thoob plaws hauv qhov piv txwv. Peb pheej ntxiv qee qhov piv txwv ntxiv ntawm no los hais txog qhov scrolling thiab highlighting.
Yam khoom 4
Nov yog qee qhov chaw muab cov ntsiab lus rau nplooj ntawv scrollspy. Nco ntsoov tias thaum koj nqes mus rau nplooj ntawv, qhov tsim nyog navigation txuas yog tseem ceeb. Nws rov ua dua thoob plaws hauv qhov piv txwv. Peb pheej ntxiv qee qhov piv txwv ntxiv ntawm no los hais txog qhov scrolling thiab highlighting.
<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>
Kev siv
Los ntawm cov ntaub ntawv attributes
Txhawm rau yooj yim ntxiv scrollspy tus cwj pwm rau koj qhov topbar navigation, ntxiv data-bs-spy="scroll"
rau lub caij koj xav soj ntsuam (feem ntau qhov no yuav yog <body>
). Tom qab ntawd ntxiv tus data-bs-target
cwj pwm nrog tus ID lossis chav kawm ntawm niam txiv lub ntsiab ntawm ib qho Bootstrap .nav
tivthaiv.
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>
Ntawm JavaScript
Tom qab ntxiv position: relative;
hauv koj CSS, hu rau scrollspy ntawm JavaScript:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Resolvable ID hom phiaj xav tau
Navbar txuas yuav tsum muaj lub hom phiaj id daws tau. Piv txwv li, ib qho <a href="#home">home</a>
yuav tsum sib haum rau ib yam dab tsi hauv DOM zoo li <div id="home"></div>
.
Tsis pom lub hom phiaj yam tsis quav ntsej
Lub hom phiaj cov ntsiab lus uas tsis pom yuav raug ignored thiab lawv cov khoom siv nav yuav tsis raug qhia.
Cov txheej txheem
refresh
Thaum siv scrollspy ua ke nrog kev ntxiv lossis tshem tawm cov ntsiab lus los ntawm DOM, koj yuav tsum hu rau txoj kev hloov tshiab zoo li:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
pov tseg
Destroys ib lub caij scrollspy. (Tshem cov ntaub ntawv khaws cia ntawm DOM lub caij)
getInstance
Txoj kev zoo li qub uas tso cai rau koj kom tau txais qhov piv txwv scrollspy txuam nrog DOM lub caij
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
Txoj kev zoo li qub uas tso cai rau koj kom tau txais qhov piv txwv scrollspy txuam nrog DOM lub caij, lossis tsim ib qho tshiab yog tias nws tsis tau pib
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Kev xaiv
Cov kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript. Rau cov ntaub ntawv tus cwj pwm, ntxiv rau qhov kev xaiv npe rau data-bs-
, xws li hauv data-bs-offset=""
.
Lub npe | Hom | Default | Kev piav qhia |
---|---|---|---|
offset |
tus lej | 10 |
Pixels rau offset los ntawm sab saum toj thaum xam txoj hauj lwm ntawm scroll. |
method |
txoj hlua | auto |
Nrhiav cov seem twg cov ntsiab lus spied nyob hauv auto . offset yuav siv txoj Element.getBoundingClientRect() kev kom tau scroll coordinates. position yuav siv cov khoom HTMLElement.offsetTop thiab HTMLElement.offsetLeft cov khoom kom tau txais scroll coordinates. |
target |
hlua | jQuery khoom | DOM Element | Qhia meej lub caij siv Scrollspy plugin. |
Cov xwm txheej
Hom xwm txheej | Kev piav qhia |
---|---|
activate.bs.scrollspy |
Qhov xwm txheej no tua hluav taws rau ntawm lub caij scroll thaum twg ib yam khoom tshiab tau qhib los ntawm scrollspy. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})