Scrollspy
Sinthani zokha mayendedwe a Bootstrap kapena mndandanda wamagulu amagulu kutengera malo osindikizira kuti muwonetse ulalo womwe ukugwira ntchito powonera.
Momwe zimagwirira ntchito
Scrollspy ili ndi zofunikira zingapo kuti igwire bwino ntchito:
- Iyenera kugwiritsidwa ntchito pagawo la Bootstrap nav kapena gulu la mndandanda .
- Scrollspy imafuna
position: relative;
pa chinthu chomwe mukuchizonda, nthawi zambiri<body>
. - Nangula (
<a>
) amafunikira ndipo ayenera kuloza ku chinthu chomwe chili ndi chimenechoid
.
Mukagwiritsidwa ntchito bwino, gulu lanu la nav kapena mndandanda lidzasintha moyenera, ndikusuntha .active
kalasi kuchokera ku chinthu chimodzi kupita ku china kutengera zomwe akufuna.
Zotengera zosunthika komanso mwayi wa kiyibodi
Ngati mukupanga chidebe chosunthika (kupatulapo <body>
), onetsetsani kuti height
mwakhazikitsa overflow-y: scroll;
ndikuyikapo-pamodzi ndi a tabindex="0"
kuti muwonetsetse kulowa kwa kiyibodi.
Chitsanzo mu navbar
Sungani malo omwe ali pansi pa navbar ndikuwona kusintha kwa kalasi yogwira. Zinthu zotsikira zidzawonetsedwanso.
Mutu woyamba
Izi ndi zina zomwe zili patsamba la scrollspy. Zindikirani kuti pamene mukutsitsa tsambalo, ulalo woyenera wakusaka umawonetsedwa. Imabwerezedwa mu gawo lonse lachitsanzo. Tikupitiriza kuwonjezera chitsanzo china apa kuti titsindike kupukuta ndi kuwunikira.
Mutu wachiwiri
Izi ndi zina zomwe zili patsamba la scrollspy. Zindikirani kuti pamene mukutsitsa tsambalo, ulalo woyenera wakusaka umawonetsedwa. Imabwerezedwa mu gawo lonse lachitsanzo. Tikupitiriza kuwonjezera chitsanzo china apa kuti titsindike kupukuta ndi kuwunikira.
Mutu wachitatu
Izi ndi zina zomwe zili patsamba la scrollspy. Zindikirani kuti pamene mukutsitsa tsambalo, ulalo woyenera wakusaka umawonetsedwa. Imabwerezedwa mu gawo lonse lachitsanzo. Tikupitiriza kuwonjezera chitsanzo china apa kuti titsindike kupukuta ndi kuwunikira.
Mutu wachinayi
Izi ndi zina zomwe zili patsamba la scrollspy. Zindikirani kuti pamene mukutsitsa tsambalo, ulalo woyenera wakusaka umawonetsedwa. Imabwerezedwa mu gawo lonse lachitsanzo. Tikupitiriza kuwonjezera chitsanzo china apa kuti titsindike kupukuta ndi kuwunikira.
Mutu wachisanu
Izi ndi zina zomwe zili patsamba la scrollspy. Zindikirani kuti pamene mukutsitsa tsambalo, ulalo woyenera wakusaka umawonetsedwa. Imabwerezedwa mu gawo lonse lachitsanzo. Tikupitiriza kuwonjezera chitsanzo china apa kuti titsindike kupukuta ndi kuwunikira.
<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>
Chitsanzo ndi nested nav
Scrollspy imagwiranso ntchito ndi nested .nav
s. Ngati chisa .nav
chili .active
, makolo akenso adzakhala .active
. Mpukutu pafupi ndi navbar ndikuwona kusintha kwa kalasi yogwira.
Chinthu 1
Izi ndi zina zomwe zili patsamba la scrollspy. Zindikirani kuti pamene mukutsitsa tsambalo, ulalo woyenera wakusaka umawonetsedwa. Imabwerezedwa mu gawo lonse lachitsanzo. Tikupitiriza kuwonjezera chitsanzo china apa kuti titsindike kupukuta ndi kuwunikira.
Chithunzi 1-1
Izi ndi zina zomwe zili patsamba la scrollspy. Zindikirani kuti pamene mukutsitsa tsambalo, ulalo woyenera wakusaka umawonetsedwa. Imabwerezedwa mu gawo lonse lachitsanzo. Tikupitiriza kuwonjezera chitsanzo china apa kuti titsindike kupukuta ndi kuwunikira.
Chithunzi 1-2
Izi ndi zina zomwe zili patsamba la scrollspy. Zindikirani kuti pamene mukutsitsa tsambalo, ulalo woyenera wakusaka umawonetsedwa. Imabwerezedwa mu gawo lonse lachitsanzo. Tikupitiriza kuwonjezera chitsanzo china apa kuti titsindike kupukuta ndi kuwunikira.
Chinthu 2
Izi ndi zina zomwe zili patsamba la scrollspy. Zindikirani kuti pamene mukutsitsa tsambalo, ulalo woyenera wakusaka umawonetsedwa. Imabwerezedwa mu gawo lonse lachitsanzo. Tikupitiriza kuwonjezera chitsanzo china apa kuti titsindike kupukuta ndi kuwunikira.
Chinthu 3
Izi ndi zina zomwe zili patsamba la scrollspy. Zindikirani kuti pamene mukutsitsa tsambalo, ulalo woyenera wakusaka umawonetsedwa. Imabwerezedwa mu gawo lonse lachitsanzo. Tikupitiriza kuwonjezera chitsanzo china apa kuti titsindike kupukuta ndi kuwunikira.
Chithunzi 3-1
Izi ndi zina zomwe zili patsamba la scrollspy. Zindikirani kuti pamene mukutsitsa tsambalo, ulalo woyenera wakusaka umawonetsedwa. Imabwerezedwa mu gawo lonse lachitsanzo. Tikupitiriza kuwonjezera chitsanzo china apa kuti titsindike kupukuta ndi kuwunikira.
Chithunzi 3-2
Izi ndi zina zomwe zili patsamba la scrollspy. Zindikirani kuti pamene mukutsitsa tsambalo, ulalo woyenera wakusaka umawonetsedwa. Imabwerezedwa mu gawo lonse lachitsanzo. Tikupitiriza kuwonjezera chitsanzo china apa kuti titsindike kupukuta ndi kuwunikira.
<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>
Chitsanzo ndi mndandanda-gulu
Scrollspy imagwiranso ntchito ndi .list-group
s. Mpukutu m'dera pafupi ndi mndandanda gulu ndi kuona yogwira kusintha kalasi.
Chinthu 1
Izi ndi zina zomwe zili patsamba la scrollspy. Zindikirani kuti pamene mukutsitsa tsambalo, ulalo woyenera wakusaka umawonetsedwa. Imabwerezedwa mu gawo lonse lachitsanzo. Tikupitiriza kuwonjezera chitsanzo china apa kuti titsindike kupukuta ndi kuwunikira.
Chinthu 2
Izi ndi zina zomwe zili patsamba la scrollspy. Zindikirani kuti pamene mukutsitsa tsambalo, ulalo woyenera wakusaka umawonetsedwa. Imabwerezedwa mu gawo lonse lachitsanzo. Tikupitiriza kuwonjezera chitsanzo china apa kuti titsindike kupukuta ndi kuwunikira.
Chinthu 3
Izi ndi zina zomwe zili patsamba la scrollspy. Zindikirani kuti pamene mukutsitsa tsambalo, ulalo woyenera wakusaka umawonetsedwa. Imabwerezedwa mu gawo lonse lachitsanzo. Tikupitiriza kuwonjezera chitsanzo china apa kuti titsindike kupukuta ndi kuwunikira.
Chinthu 4
Izi ndi zina zomwe zili patsamba la scrollspy. Zindikirani kuti pamene mukutsitsa tsambalo, ulalo woyenera wakusaka umawonetsedwa. Imabwerezedwa mu gawo lonse lachitsanzo. Tikupitiriza kuwonjezera chitsanzo china apa kuti titsindike kupukuta ndi kuwunikira.
<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>
Kugwiritsa ntchito
Kudzera muzochita za data
Kuti muwonjezere machitidwe a scrollspy pamayendedwe anu apamwamba, onjezani data-bs-spy="scroll"
ku chinthu chomwe mukufuna kuti mukazonde (nthawi zambiri izi zitha kukhala <body>
). Kenako onjezani mawonekedwewo data-bs-target
ndi ID kapena kalasi ya kholo la gawo lililonse la Bootstrap .nav
.
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>
Kudzera pa JavaScript
Mukawonjezera position: relative;
CSS yanu, imbani scrollspy kudzera pa JavaScript:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Zolinga za ID zothetsedwa ndizofunikira
Maulalo a Navbar akuyenera kukhala ndi ma id omwe angathetsedwe. Mwachitsanzo, <a href="#home">home</a>
ziyenera kugwirizana ndi china chake mu DOM monga <div id="home"></div>
.
Zosawoneka zofuna kutsata sizinanyalanyazidwe
Zolinga zomwe sizikuwoneka sizidzanyalanyazidwa ndipo zomwe zikugwirizana nazo sizidzawonetsedwa.
Njira
tsitsimutsani
Mukamagwiritsa ntchito scrollspy molumikizana ndi kuwonjezera kapena kuchotsa zinthu mu DOM, muyenera kuyimbira njira yotsitsimutsa motere:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
kutaya
Imawononga scrollspy ya chinthu. (Imachotsa deta yosungidwa pa chinthu cha DOM)
getInstance
Njira yosasunthika yomwe imakupatsani mwayi woti mutenge scrollspy chitsanzo cholumikizidwa ndi chinthu cha DOM
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
GetOrCreateInstance
Njira yosasunthika yomwe imakulolani kuti mutenge chitsanzo cha scrollspy cholumikizidwa ndi chinthu cha DOM, kapena pangani china chatsopano ngati sichinayambike.
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Zosankha
Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-bs-
, monga mu data-bs-offset=""
.
Dzina | Mtundu | Zosasintha | Kufotokozera |
---|---|---|---|
offset |
nambala | 10 |
Ma pixel oti muyike kuchokera pamwamba powerengera malo osindikizira. |
method |
chingwe | auto |
Ipeza gawo lomwe spied ilimo. auto idzasankha njira yabwino yopezera ma coordinates a mipukutu. offset adzagwiritsa ntchito Element.getBoundingClientRect() njira yopezera mipukutu yolumikizana. position adzagwiritsa ntchito HTMLElement.offsetTop ndi HTMLElement.offsetLeft katundu kuti apeze zolumikizira za mipukutu. |
target |
chingwe | jQuery chinthu | Chithunzi cha DOM | Imatchula chinthu choti mugwiritse ntchito pulogalamu yowonjezera ya Scrollspy. |
Zochitika
Mtundu wa chochitika | Kufotokozera |
---|---|
activate.bs.scrollspy |
Chochitikachi chimayaka pamipukutu nthawi iliyonse chinthu chatsopano chikatsegulidwa ndi scrollspy. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})