Ebiwandiiko ebiyitibwa Scrollspy
Okulongoosa mu ngeri ey’otoma ebitundu by’okutambuliramu kwa Bootstrap oba olukalala lw’ekibinja okusinziira ku kifo ky’okutambula okulaga enkolagana ki ekola mu kiseera kino mu kifo eky’okulaba.
Engeri gye kikola
Scrollspy erina ebitonotono bye yeetaaga okukola obulungi:
- Kiteekwa okukozesebwa ku kitundu kya Bootstrap nav oba ekibiina ky'olukalala .
- Scrollspy yeetaaga
position: relative;
ku elementi gy'oketta, ebiseera ebisinga<body>
. - Ennanga (
<a>
) zeetaagibwa era zirina okusonga ku elementi eriko ekyoid
.
Bwe kiteekebwa mu nkola obulungi, nav yo oba ekibiina kyo eky’olukalala kijja kulongoosa okusinziira ku ekyo, okutambuza .active
ekibiina okuva ku kintu ekimu okudda ku kirala okusinziira ku bigendererwa byabwe ebikwatagana.
Ebintu ebisobola okutambula n’okuyingira ku kibboodi
Bw’oba okola ekintu ekiyinza okutambula (okuggyako <body>
), kakasa nti olina height
seti era overflow-y: scroll;
n’ogisiigako —oku mabbali ga a tabindex="0"
okukakasa nti kiiboodi eyingira.
Okugeza mu navbar
Ssenda ekitundu wansi wa navbar era olabe enkyukakyuka ya kiraasi ekola. Ebintu ebigenda okukka wansi nabyo bijja kulagibwa.
Omutwe ogusooka
Kino kye kimu ku bikwata ku kifo eky'olupapula lwa scrollspy. Weetegereze nti bw’ogenda wansi ku lupapula, enkolagana esaanira ey’okutambuliramu eraga. Kiddibwamu mu kyokulabirako kyonna eky'ekitundu. Tusigala nga twongerako kkopi endala ez’ekyokulabirako wano okuggumiza okuzingulula n’okulaga.
Omutwe ogwokubiri
Kino kye kimu ku bikwata ku kifo eky'olupapula lwa scrollspy. Weetegereze nti bw’ogenda wansi ku lupapula, enkolagana esaanira ey’okutambuliramu eraga. Kiddibwamu mu kyokulabirako kyonna eky'ekitundu. Tusigala nga twongerako kkopi endala ez’ekyokulabirako wano okuggumiza okuzingulula n’okulaga.
Omutwe ogw’okusatu
Kino kye kimu ku bikwata ku kifo eky'olupapula lwa scrollspy. Weetegereze nti bw’ogenda wansi ku lupapula, enkolagana esaanira ey’okutambuliramu eraga. Kiddibwamu mu kyokulabirako kyonna eky'ekitundu. Tusigala nga twongerako kkopi endala ez’ekyokulabirako wano okuggumiza okuzingulula n’okulaga.
Omutwe ogw’okuna
Kino kye kimu ku bikwata ku kifo eky'olupapula lwa scrollspy. Weetegereze nti bw’ogenda wansi ku lupapula, enkolagana esaanira ey’okutambuliramu eraga. Kiddibwamu mu kyokulabirako kyonna eky'ekitundu. Tusigala nga twongerako kkopi endala ez’ekyokulabirako wano okuggumiza okuzingulula n’okulaga.
Omutwe ogw’okutaano
Kino kye kimu ku bikwata ku kifo eky'olupapula lwa scrollspy. Weetegereze nti bw’ogenda wansi ku lupapula, enkolagana esaanira ey’okutambuliramu eraga. Kiddibwamu mu kyokulabirako kyonna eky'ekitundu. Tusigala nga twongerako kkopi endala ez’ekyokulabirako wano okuggumiza okuzingulula n’okulaga.
<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>
Okugeza ne nested nav
Scrollspy era ekola ne nested .nav
s. Singa nested .nav
eba .active
, bazadde baayo nabo bajja kuba .active
. Ssenda ekitundu ekiriraanye navbar era olabe enkyukakyuka ya kiraasi ekola.
Ekintu 1
Kino kye kimu ku bikwata ku kifo eky'olupapula lwa scrollspy. Weetegereze nti bw’ogenda wansi ku lupapula, enkolagana esaanira ey’okutambuliramu eraga. Kiddibwamu mu kyokulabirako kyonna eky'ekitundu. Tusigala nga twongerako kkopi endala ez’ekyokulabirako wano okuggumiza okuzingulula n’okulaga.
Ekintu 1-1
Kino kye kimu ku bikwata ku kifo eky'olupapula lwa scrollspy. Weetegereze nti bw’ogenda wansi ku lupapula, enkolagana esaanira ey’okutambuliramu eraga. Kiddibwamu mu kyokulabirako kyonna eky'ekitundu. Tusigala nga twongerako kkopi endala ez’ekyokulabirako wano okuggumiza okuzingulula n’okulaga.
Ekintu 1-2
Kino kye kimu ku bikwata ku kifo eky'olupapula lwa scrollspy. Weetegereze nti bw’ogenda wansi ku lupapula, enkolagana esaanira ey’okutambuliramu eraga. Kiddibwamu mu kyokulabirako kyonna eky'ekitundu. Tusigala nga twongerako kkopi endala ez’ekyokulabirako wano okuggumiza okuzingulula n’okulaga.
Ekintu 2
Kino kye kimu ku bikwata ku kifo eky'olupapula lwa scrollspy. Weetegereze nti bw’ogenda wansi ku lupapula, enkolagana esaanira ey’okutambuliramu eraga. Kiddibwamu mu kyokulabirako kyonna eky'ekitundu. Tusigala nga twongerako kkopi endala ez’ekyokulabirako wano okuggumiza okuzingulula n’okulaga.
Ekintu 3
Kino kye kimu ku bikwata ku kifo eky'olupapula lwa scrollspy. Weetegereze nti bw’ogenda wansi ku lupapula, enkolagana esaanira ey’okutambuliramu eraga. Kiddibwamu mu kyokulabirako kyonna eky'ekitundu. Tusigala nga twongerako kkopi endala ez’ekyokulabirako wano okuggumiza okuzingulula n’okulaga.
Ekintu 3-1
Kino kye kimu ku bikwata ku kifo eky'olupapula lwa scrollspy. Weetegereze nti bw’ogenda wansi ku lupapula, enkolagana esaanira ey’okutambuliramu eraga. Kiddibwamu mu kyokulabirako kyonna eky'ekitundu. Tusigala nga twongerako kkopi endala ez’ekyokulabirako wano okuggumiza okuzingulula n’okulaga.
Ekintu 3-2
Kino kye kimu ku bikwata ku kifo eky'olupapula lwa scrollspy. Weetegereze nti bw’ogenda wansi ku lupapula, enkolagana esaanira ey’okutambuliramu eraga. Kiddibwamu mu kyokulabirako kyonna eky'ekitundu. Tusigala nga twongerako kkopi endala ez’ekyokulabirako wano okuggumiza okuzingulula n’okulaga.
<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>
Ekyokulabirako ne list-group
Scrollspy nayo ekola ne .list-group
s. Ssenda ekitundu ekiriraanye ekibinja ky’olukalala era olabe enkyukakyuka ya kiraasi ekola.
Ekintu 1
Kino kye kimu ku bikwata ku kifo eky'olupapula lwa scrollspy. Weetegereze nti bw’ogenda wansi ku lupapula, enkolagana esaanira ey’okutambuliramu eraga. Kiddibwamu mu kyokulabirako kyonna eky'ekitundu. Tusigala nga twongerako kkopi endala ez’ekyokulabirako wano okuggumiza okuzingulula n’okulaga.
Ekintu 2
Kino kye kimu ku bikwata ku kifo eky'olupapula lwa scrollspy. Weetegereze nti bw’ogenda wansi ku lupapula, enkolagana esaanira ey’okutambuliramu eraga. Kiddibwamu mu kyokulabirako kyonna eky'ekitundu. Tusigala nga twongerako kkopi endala ez’ekyokulabirako wano okuggumiza okuzingulula n’okulaga.
Ekintu 3
Kino kye kimu ku bikwata ku kifo eky'olupapula lwa scrollspy. Weetegereze nti bw’ogenda wansi ku lupapula, enkolagana esaanira ey’okutambuliramu eraga. Kiddibwamu mu kyokulabirako kyonna eky'ekitundu. Tusigala nga twongerako kkopi endala ez’ekyokulabirako wano okuggumiza okuzingulula n’okulaga.
Ekintu 4
Kino kye kimu ku bikwata ku kifo eky'olupapula lwa scrollspy. Weetegereze nti bw’ogenda wansi ku lupapula, enkolagana esaanira ey’okutambuliramu eraga. Kiddibwamu mu kyokulabirako kyonna eky'ekitundu. Tusigala nga twongerako kkopi endala ez’ekyokulabirako wano okuggumiza okuzingulula n’okulaga.
<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>
Enkozesa
Okuyita mu bikwata ku data
Okusobola okwanguyirwa okwongerako enneeyisa ya scrollspy ku topbar navigation yo, yongera data-bs-spy="scroll"
ku elementi gy’oyagala okuketta (okusinga kino kyandibadde <body>
). Oluvannyuma yongera ku data-bs-target
attribute ne ID oba class ya parent element ya Bootstrap .nav
component yonna.
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>
Okuyita mu JavaScript
Oluvannyuma lw’okugattako position: relative;
mu CSS yo, yita scrollspy ng’oyita mu JavaScript:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Ebiruubirirwa bya ID ebigonjoolwa byetaagisa
Enkolagana za Navbar zirina okuba n'ebigendererwa bya id ebisobola okugonjoolwa. Okugeza, a <a href="#home">home</a>
erina okukwatagana n’ekintu mu DOM nga <div id="home"></div>
.
Ebintu ebigendererwa ebitali birabika bibuusibwa amaaso
Ebintu ebigendererwa ebitalabika bijja kubuusibwa amaaso era ebintu byabwe ebya nav ebikwatagana tebijja kulagibwa.
Enkola
okuzza obuggya
Bw'oba okozesa scrollspy wamu n'okugattako oba okuggyawo ebintu okuva mu DOM, ojja kwetaaga okuyita enkola y'okuzza obuggya nga bwe kityo:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
okusuula
Esaanyaawo scrollspy ya elementi. (Eggyawo data eterekeddwa ku elementi ya DOM)
getEkyokulabirako
Enkola ya static ekusobozesa okufuna scrollspy instance ekwatagana ne DOM element
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getObaTondawoEkifaananyi
Enkola ya static ekusobozesa okufuna scrollspy instance ekwatagana ne DOM element, oba okukola empya singa teyali etandikibwawo
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Eby’okulondako
Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-bs-
, nga mu data-bs-offset=""
.
Erinnya | Okuwandiika | Okukosamu | Okunnyonnyola |
---|---|---|---|
offset |
omuwendo | 10 |
Pixels oku offset okuva waggulu nga obala ekifo ky'omuzingo. |
method |
akaguwa | auto |
Finds the section the sped element is in. auto ajja kulonda enkola esinga obulungi okufuna scroll coordinates. offset ejja kukozesa Element.getBoundingClientRect() enkola okufuna scroll coordinates. position ejja kukozesa eby'obugagga HTMLElement.offsetTop ne HTMLElement.offsetLeft okufuna ensengekera z'okutambula. |
target |
olunyiriri | jEkintu ky'okubuuza | Ekintu kya DOM | Laga elementi okukozesa Scrollspy plugin. |
Ebibaddewo
Ekika ky’ekintu ekibaawo | Okunnyonnyola |
---|---|
activate.bs.scrollspy |
Ekintu kino kikuba amasasi ku elementi y'omuzingo buli kintu ekipya lwe kifuuka ekikozesebwa scrollspy. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})