Scrollspy
Buyekeza ngokuzenzakalela ukuzulazula kwe-Bootstrap noma uhlu lwezingxenye zeqembu ngokusekelwe endaweni yokuskrola ukuze ubonise ukuthi yisiphi isixhumanisi esisebenzayo okwamanje endaweni yokubuka.
Isebenza kanjani
I-Scrollspy inezidingo ezimbalwa ukuze isebenze kahle:
- Kufanele isetshenziswe engxenyeni ye-Bootstrap nav noma iqembu lohlu .
- I-Scrollspy idinga
position: relative;
ku-elementi oyihlolayo, ngokuvamile i-<body>
. - Amahange (
<a>
) ayadingeka futhi kufanele akhombe into enaleyoid
.
Lapho isetshenziswe ngempumelelo, i-nav yakho noma iqembu lohlu lizobuyekezwa ngokufanele, lisuse .active
ikilasi lisuke entweni eyodwa liye kwelandelayo ngokusekelwe kulokho elikuhlosile okuhlobene.
Iziqukathi eziskrolekayo nokufinyelela kwekhibhodi
Uma wenza isiqukathi esiskroleka (ngaphandle kwe- <body>
), qiniseka ukuthi height
unesethi futhi overflow-y: scroll;
usetshenziswe kuso—kanye no-a tabindex="0"
ukuze uqinisekise ukufinyelela kwekhibhodi.
Isibonelo ku-navbar
Skrola indawo engezansi kwe-navbar bese ubuka ukuguquka kwekilasi elisebenzayo. Izinto zokwehla zizogqanyiswa futhi.
Isihloko sokuqala
Lokhu okunye okuqukethwe kwesibambi sekhasi le-scrollspy. Qaphela ukuthi njengoba uskrolela phansi kwekhasi, isixhumanisi sokuzulazula esifanele siyagqanyiswa. Kuphindwa kuso sonke isibonelo sengxenye. Silokhu sengeza ikhophi eyengeziwe yesibonelo lapha ukuze sigcizelele ukuskrola nokugqamisa.
Isihloko sesibili
Lokhu okunye okuqukethwe kwesibambi sekhasi le-scrollspy. Qaphela ukuthi njengoba uskrolela phansi kwekhasi, isixhumanisi sokuzulazula esifanele siyagqanyiswa. Kuphindwa kuso sonke isibonelo sengxenye. Silokhu sengeza ikhophi eyengeziwe yesibonelo lapha ukuze sigcizelele ukuskrola nokugqamisa.
Isihloko sesithathu
Lokhu okunye okuqukethwe kwesibambi sekhasi le-scrollspy. Qaphela ukuthi njengoba uskrolela phansi kwekhasi, isixhumanisi sokuzulazula esifanele siyagqanyiswa. Kuphindwa kuso sonke isibonelo sengxenye. Silokhu sengeza ikhophi eyengeziwe yesibonelo lapha ukuze sigcizelele ukuskrola nokugqamisa.
Isihloko sesine
Lokhu okunye okuqukethwe kwesibambi sekhasi le-scrollspy. Qaphela ukuthi njengoba uskrolela phansi kwekhasi, isixhumanisi sokuzulazula esifanele siyagqanyiswa. Kuphindwa kuso sonke isibonelo sengxenye. Silokhu sengeza ikhophi eyengeziwe yesibonelo lapha ukuze sigcizelele ukuskrola nokugqamisa.
Isihloko sesihlanu
Lokhu okunye okuqukethwe kwesibambi sekhasi le-scrollspy. Qaphela ukuthi njengoba uskrolela phansi kwekhasi, isixhumanisi sokuzulazula esifanele siyagqanyiswa. Kuphindwa kuso sonke isibonelo sengxenye. Silokhu sengeza ikhophi eyengeziwe yesibonelo lapha ukuze sigcizelele ukuskrola nokugqamisa.
<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>
Isibonelo esine-nested nav
I-Scrollspy iphinde isebenze ne-nested .nav
s. Uma kunesidleke .nav
, .active
abazali bayo nabo bazoba .active
. Skrola indawo eduze kwe-navbar bese ubuka ukuguquka kwekilasi elisebenzayo.
Into 1
Lokhu okunye okuqukethwe kwesibambi sekhasi le-scrollspy. Qaphela ukuthi njengoba uskrolela phansi kwekhasi, isixhumanisi sokuzulazula esifanele siyagqanyiswa. Kuphindwa kuso sonke isibonelo sengxenye. Silokhu sengeza ikhophi eyengeziwe yesibonelo lapha ukuze sigcizelele ukuskrola nokugqamisa.
Into 1-1
Lokhu okunye okuqukethwe kwesibambi sekhasi le-scrollspy. Qaphela ukuthi njengoba uskrolela phansi kwekhasi, isixhumanisi sokuzulazula esifanele siyagqanyiswa. Kuphindwa kuso sonke isibonelo sengxenye. Silokhu sengeza ikhophi eyengeziwe yesibonelo lapha ukuze sigcizelele ukuskrola nokugqamisa.
Iphuzu 1-2
Lokhu okunye okuqukethwe kwesibambi sekhasi le-scrollspy. Qaphela ukuthi njengoba uskrolela phansi kwekhasi, isixhumanisi sokuzulazula esifanele siyagqanyiswa. Kuphindwa kuso sonke isibonelo sengxenye. Silokhu sengeza ikhophi eyengeziwe yesibonelo lapha ukuze sigcizelele ukuskrola nokugqamisa.
Into 2
Lokhu okunye okuqukethwe kwesibambi sekhasi le-scrollspy. Qaphela ukuthi njengoba uskrolela phansi kwekhasi, isixhumanisi sokuzulazula esifanele siyagqanyiswa. Kuphindwa kuso sonke isibonelo sengxenye. Silokhu sengeza ikhophi eyengeziwe yesibonelo lapha ukuze sigcizelele ukuskrola nokugqamisa.
Into yesi-3
Lokhu okunye okuqukethwe kwesibambi sekhasi le-scrollspy. Qaphela ukuthi njengoba uskrolela phansi kwekhasi, isixhumanisi sokuzulazula esifanele siyagqanyiswa. Kuphindwa kuso sonke isibonelo sengxenye. Silokhu sengeza ikhophi eyengeziwe yesibonelo lapha ukuze sigcizelele ukuskrola nokugqamisa.
Into 3-1
Lokhu okunye okuqukethwe kwesibambi sekhasi le-scrollspy. Qaphela ukuthi njengoba uskrolela phansi kwekhasi, isixhumanisi sokuzulazula esifanele siyagqanyiswa. Kuphindwa kuso sonke isibonelo sengxenye. Silokhu sengeza ikhophi eyengeziwe yesibonelo lapha ukuze sigcizelele ukuskrola nokugqamisa.
Iphuzu 3-2
Lokhu okunye okuqukethwe kwesibambi sekhasi le-scrollspy. Qaphela ukuthi njengoba uskrolela phansi kwekhasi, isixhumanisi sokuzulazula esifanele siyagqanyiswa. Kuphindwa kuso sonke isibonelo sengxenye. Silokhu sengeza ikhophi eyengeziwe yesibonelo lapha ukuze sigcizelele ukuskrola nokugqamisa.
<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>
Isibonelo nge-list-group
I-Scrollspy iphinde isebenze no- .list-group
s. Skrola indawo eseduze neqembu lohlu bese ubuka ukuguquka kwekilasi elisebenzayo.
Into 1
Lokhu okunye okuqukethwe kwesibambi sekhasi le-scrollspy. Qaphela ukuthi njengoba uskrolela phansi kwekhasi, isixhumanisi sokuzulazula esifanele siyagqanyiswa. Kuphindwa kuso sonke isibonelo sengxenye. Silokhu sengeza ikhophi eyengeziwe yesibonelo lapha ukuze sigcizelele ukuskrola nokugqamisa.
Into 2
Lokhu okunye okuqukethwe kwesibambi sekhasi le-scrollspy. Qaphela ukuthi njengoba uskrolela phansi kwekhasi, isixhumanisi sokuzulazula esifanele siyagqanyiswa. Kuphindwa kuso sonke isibonelo sengxenye. Silokhu sengeza ikhophi eyengeziwe yesibonelo lapha ukuze sigcizelele ukuskrola nokugqamisa.
Into yesi-3
Lokhu okunye okuqukethwe kwesibambi sekhasi le-scrollspy. Qaphela ukuthi njengoba uskrolela phansi kwekhasi, isixhumanisi sokuzulazula esifanele siyagqanyiswa. Kuphindwa kuso sonke isibonelo sengxenye. Silokhu sengeza ikhophi eyengeziwe yesibonelo lapha ukuze sigcizelele ukuskrola nokugqamisa.
Iphuzu 4
Lokhu okunye okuqukethwe kwesibambi sekhasi le-scrollspy. Qaphela ukuthi njengoba uskrolela phansi kwekhasi, isixhumanisi sokuzulazula esifanele siyagqanyiswa. Kuphindwa kuso sonke isibonelo sengxenye. Silokhu sengeza ikhophi eyengeziwe yesibonelo lapha ukuze sigcizelele ukuskrola nokugqamisa.
<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>
Ukusetshenziswa
Ngezibaluli zedatha
Ukwengeza kalula impatho ye-scrollspy ekuzulazuleni kwe data-bs-spy="scroll"
-topbar yakho, engeza entweni ofuna ukuyihlola (imvamisa lokhu kuzoba yi- <body>
). Bese wengeza data-bs-target
isibaluli nge-ID noma isigaba sesici esingumzali sanoma iyiphi .nav
ingxenye ye-Bootstrap.
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>
Nge-JavaScript
Ngemva kokungeza position: relative;
ku-CSS yakho, shayela i-scrollspy nge-JavaScript:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Kudingeka okuqondiwe kwe-ID okungaxazululeka
Izixhumanisi ze-Navbar kufanele zibe neziqondiso ze-id ezingaxazululeka. Isibonelo, <a href="#home">home</a>
okumele kuhambisane nento ethize ku-DOM efana ne- <div id="home"></div>
.
Izinto eziqondiwe ezingabonakali azinakiwe
Izinto eziqondiwe ezingabonakali zizozitshwa futhi izinto zazo ezihambisanayo azisoze zagqanyiswa.
Izindlela
vuselela
Uma usebenzisa i-scrollspy ngokuhambisana nokwengeza noma ukususa izakhi ku-DOM, uzodinga ukushayela indlela yokuvuselela kanje:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
lahla
Icekela phansi i-scrollspy yento. (Isusa idatha egciniwe kusici se-DOM)
getInstance
Indlela emile ekuvumela ukuthi uthole isibonelo sokuskrola esihlotshaniswa nesici se-DOM
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
Indlela emile ekuvumela ukuthi uthole isenzakalo sokuskrola esihlotshaniswa nento ye-DOM, noma udale entsha uma kwenzeka ingaqaliswanga.
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Izinketho
Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-bs-
, njengaku data-bs-offset=""
.
Igama | Uhlobo | Okuzenzakalelayo | Incazelo |
---|---|---|---|
offset |
inombolo | 10 |
Amaphikseli okufanele uwasuse ukusuka phezulu uma ubala indawo yokuskrola. |
method |
umucu | auto |
Ithola ukuthi yisiphi isigaba into eyisihloli esikuso. auto izokhetha indlela engcono kakhulu yokuthola izixhumanisi zokuskrola. offset izosebenzisa Element.getBoundingClientRect() indlela yokuthola izixhumanisi zokuskrola. position izosebenzisa i- HTMLElement.offsetTop kanye HTMLElement.offsetLeft nezakhiwo ukuze ithole izixhumanisi zokuskrola. |
target |
umucu | into ye-jQuery | Isici se-DOM | Icacisa into ezosetshenziswa i-plugin ye-Scrollspy. |
Imicimbi
Uhlobo lomcimbi | Incazelo |
---|---|
activate.bs.scrollspy |
Lo mcimbi uvutha kusici sokuskrola noma nini lapho into entsha yenziwa isebenze i-scrollspy. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})