Scrollspy
Sasisha kiotomatiki urambazaji wa Bootstrap au orodhesha vipengee vya kikundi kulingana na nafasi ya kusogeza ili kuonyesha ni kiungo gani kinachotumika kwa sasa kwenye poti ya kutazama.
Inavyofanya kazi
Scrollspy hugeuza .activedarasa kwenye vipengee vya nanga ( <a>) wakati kipengele chenye idrejeleo la nanga hrefkinasogezwa kwenye mwonekano. Scrollspy hutumiwa vyema kwa kushirikiana na kijenzi cha Bootstrap nav au kikundi cha orodha , lakini pia itafanya kazi na vipengele vyovyote vya nanga katika ukurasa wa sasa. Hivi ndivyo inavyofanya kazi.
-
Ili kuanza, scrollspy inahitaji mambo mawili: urambazaji, kikundi cha orodha, au seti rahisi ya viungo, pamoja na kontena inayoweza kusongeshwa. Chombo kinachoweza kusongeshwa kinaweza kuwa
<body>kipengee au kipengee maalum kilicho na setiheightnaoverflow-y: scroll. -
Kwenye kontena inayoweza kusongeshwa, ongeza
data-bs-spy="scroll"na nidata-bs-target="#navId"wapinavIdupekeeidwa urambazaji unaohusishwa. Hakikisha umejumuisha piatabindex="0"ili kuhakikisha ufikiaji wa kibodi. -
Unaposogeza kontena "iliyopeleleza",
.activedarasa linaongezwa na kuondolewa kutoka kwa viungo vya kushikilia ndani ya usogezaji unaohusishwa. Viungo lazima viwe naidmalengo yanayoweza kutatuliwa, vinginevyo vitapuuzwa. Kwa mfano,<a href="#home">home</a>lazima ilingane na kitu katika DOM kama<div id="home"></div> -
Vipengele vinavyolengwa ambavyo havionekani vitapuuzwa. Tazama sehemu ya Vipengee Visivyoonekana hapa chini.
Mifano
Upau wa urambazaji
Tembeza eneo chini ya upau wa urambazaji na utazame mabadiliko ya darasa amilifu. Fungua menyu kunjuzi na utazame vipengee kunjuzi vikiangaziwa pia.
Kichwa cha kwanza
Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.
Kichwa cha pili
Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.
Kichwa cha tatu
Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.
Kichwa cha nne
Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.
Kichwa cha tano
Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.
<nav id="navbar-example2" class="navbar bg-light px-3 mb-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-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2" 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>
Nested nav
Scrollspy pia inafanya kazi na nested .navs. Ikiwa kiota kitawekwa .nav, .activewazazi wake pia watakuwa .active. Tembeza eneo karibu na upau wa urambazaji na utazame mabadiliko ya darasa yanayoendelea.
Kipengee cha 1
Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.
Kumbuka kwamba programu-jalizi ya JavaScript inajaribu kuchagua kipengee sahihi kati ya yote ambayo yanaweza kuonekana. Malengo mengi yanayoonekana ya kusogeza kwa wakati mmoja yanaweza kusababisha masuala kadhaa.
Kipengee 1-1
Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.
Kumbuka kwamba programu-jalizi ya JavaScript inajaribu kuchagua kipengee sahihi kati ya yote ambayo yanaweza kuonekana. Malengo mengi yanayoonekana ya kusogeza kwa wakati mmoja yanaweza kusababisha masuala kadhaa.
Kipengee 1-2
Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.
Kumbuka kwamba programu-jalizi ya JavaScript inajaribu kuchagua kipengee sahihi kati ya yote ambayo yanaweza kuonekana. Malengo mengi yanayoonekana ya kusogeza kwa wakati mmoja yanaweza kusababisha masuala kadhaa.
Kipengee cha 2
Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.
Kumbuka kwamba programu-jalizi ya JavaScript inajaribu kuchagua kipengee sahihi kati ya yote ambayo yanaweza kuonekana. Malengo mengi yanayoonekana ya kusogeza kwa wakati mmoja yanaweza kusababisha masuala kadhaa.
Kipengee cha 3
Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.
Kumbuka kwamba programu-jalizi ya JavaScript inajaribu kuchagua kipengee sahihi kati ya yote ambayo yanaweza kuonekana. Malengo mengi yanayoonekana ya kusogeza kwa wakati mmoja yanaweza kusababisha masuala kadhaa.
Kipengee 3-1
Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.
Kumbuka kwamba programu-jalizi ya JavaScript inajaribu kuchagua kipengee sahihi kati ya yote ambayo yanaweza kuonekana. Malengo mengi yanayoonekana ya kusogeza kwa wakati mmoja yanaweza kusababisha masuala kadhaa.
Kipengee 3-2
Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.
Kumbuka kwamba programu-jalizi ya JavaScript inajaribu kuchagua kipengee sahihi kati ya yote ambayo yanaweza kuonekana. Malengo mengi yanayoonekana ya kusogeza kwa wakati mmoja yanaweza kusababisha masuala kadhaa.
<div class="row">
<div class="col-4">
<nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
<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>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
<div id="item-1">
<h4>Item 1</h4>
<p>...</p>
</div>
<div id="item-1-1">
<h5>Item 1-1</h5>
<p>...</p>
</div>
<div id="item-1-2">
<h5>Item 1-2</h5>
<p>...</p>
</div>
<div id="item-2">
<h4>Item 2</h4>
<p>...</p>
</div>
<div id="item-3">
<h4>Item 3</h4>
<p>...</p>
</div>
<div id="item-3-1">
<h5>Item 3-1</h5>
<p>...</p>
</div>
<div id="item-3-2">
<h5>Item 3-2</h5>
<p>...</p>
</div>
</div>
</div>
</div>
Kundi la orodha
Scrollspy pia inafanya kazi na .list-groups. Tembeza eneo karibu na kikundi cha orodha na uangalie mabadiliko ya darasa yanayoendelea.
Kipengee cha 1
Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.
Kipengee cha 2
Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.
Kipengee cha 3
Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.
Kipengee cha 4
Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.
<div class="row">
<div class="col-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>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" 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>
</div>
</div>
Anchora rahisi
Scrollspy haizuiliwi kwa vipengele vya nav na vikundi vya orodha, kwa hivyo itafanya kazi kwa <a>vipengele vyovyote vya nanga kwenye hati ya sasa. Tembeza eneo hilo na utazame .activedarasa likibadilika.
Kipengee cha 1
Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.
Kipengee cha 2
Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.
Kipengee cha 3
Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.
Kipengee cha 4
Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.
Kipengee cha 5
Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.
<div class="row">
<div class="col-4">
<div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
<a class="p-1 rounded" href="#simple-list-item-1">Item 1</a>
<a class="p-1 rounded" href="#simple-list-item-2">Item 2</a>
<a class="p-1 rounded" href="#simple-list-item-3">Item 3</a>
<a class="p-1 rounded" href="#simple-list-item-4">Item 4</a>
<a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
</div>
</div>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
<h4 id="simple-list-item-1">Item 1</h4>
<p>...</p>
<h4 id="simple-list-item-2">Item 2</h4>
<p>...</p>
<h4 id="simple-list-item-3">Item 3</h4>
<p>...</p>
<h4 id="simple-list-item-4">Item 4</h4>
<p>...</p>
<h4 id="simple-list-item-5">Item 5</h4>
<p>...</p>
</div>
</div>
</div>
Vipengele visivyoonekana
Vipengee lengwa ambavyo havionekani vitapuuzwa na vipengee vyake vinavyolingana havitapokea .activedarasa. Matukio ya kusogeza yaliyoanzishwa katika kanga isiyoonekana yatapuuza vipengele vyote vinavyolengwa. Tumia refreshnjia ya kuangalia vitu vinavyoonekana mara tu kitambaa kinapoonekana.
document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
el.addEventListener('shown.bs.tab', () => {
const target = el.getAttribute('data-bs-target')
const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
})
})
Matumizi
Kupitia sifa za data
Ili kuongeza kwa urahisi tabia ya kusongesha kwenye urambazaji wa upau wako wa juu, ongeza data-bs-spy="scroll"kwenye kipengee unachotaka kupeleleza (kawaida hii itakuwa <body>). Kisha ongeza data-bs-targetsifa kwa idjina au darasa la kipengele kikuu cha kipengele chochote cha Bootstrap .nav.
<body data-bs-spy="scroll" data-bs-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
Kupitia JavaScript
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Chaguo
Kwa vile chaguo zinaweza kupitishwa kupitia sifa za data au JavaScript, unaweza kuongeza jina la chaguo kwa data-bs-, kama katika data-bs-animation="{value}". Hakikisha umebadilisha aina ya kipochi cha jina la chaguo kutoka " camelCase " hadi " kebab-case " wakati wa kupitisha chaguo kupitia sifa za data. Kwa mfano, tumia data-bs-custom-class="beautifier"badala ya data-bs-customClass="beautifier".
Kufikia Bootstrap 5.2.0, vipengee vyote vinaauni sifa ya data iliyohifadhiwa ya majaribiodata-bs-config ambayo inaweza kuweka usanidi wa sehemu rahisi kama mfuatano wa JSON. Wakati kipengele kina data-bs-config='{"delay":0, "title":123}'na data-bs-title="456"sifa, titlethamani ya mwisho itakuwa 456na sifa tofauti za data zitabatilisha thamani zilizotolewa kwenye data-bs-config. Kwa kuongezea, sifa zilizopo za data zinaweza kuweka maadili ya JSON kama data-bs-delay='{"show":0,"hide":150}'.
| Jina | Aina | Chaguomsingi | Maelezo |
|---|---|---|---|
rootMargin |
kamba | 0px 0px -25% |
Makutano ya Kiangalizi rootMargin vitengo halali, wakati wa kukokotoa nafasi ya kusogeza. |
smoothScroll |
boolean | false |
Huwasha usogezaji laini mtumiaji anapobofya kiungo kinachorejelea vionekanavyo vya ScrollSpy. |
target |
kamba, kipengele cha DOM | null |
Inabainisha kipengele cha kutumia programu-jalizi ya Scrollspy. |
threshold |
safu | [0.1, 0.5, 1] |
IntersectionObserver ingizo halali la kizingiti , wakati wa kuhesabu nafasi ya kusogeza. |
Chaguo Zilizoacha kutumika
Hadi v5.1.3 tulikuwa tukitumia offset& methodchaguo, ambazo sasa zimeacha kutumika na kubadilishwa na rootMargin. Ili kuweka uoanifu wa kurudi nyuma, tutaendelea kuchanganua iliyotolewa offsetkwa rootMargin, lakini kipengele hiki kitaondolewa katika v6 .
Mbinu
| Njia | Maelezo |
|---|---|
dispose |
Huharibu scrollspy ya kipengele. (Huondoa data iliyohifadhiwa kwenye kipengele cha DOM) |
getInstance |
Njia tuli ya kupata mfano wa kusogeza unaohusishwa na kipengee cha DOM. |
getOrCreateInstance |
Mbinu tuli ya kupata mfano wa kusogeza unaohusishwa na kipengee cha DOM, au kuunda kipya ikiwa hakijaanzishwa. |
refresh |
Unapoongeza au kuondoa vipengee kwenye DOM, utahitaji kupiga simu njia ya kuonyesha upya. |
Hapa kuna mfano kwa kutumia njia ya kuonyesha upya:
const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
dataSpyList.forEach(dataSpyEl => {
bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
})
Matukio
| Tukio | Maelezo |
|---|---|
activate.bs.scrollspy |
Tukio hili huwaka kwenye kipengele cha kusogeza wakati wowote nanga inapowezeshwa na scrollspy. |
const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
// do something...
})