Umuzingo
Mu buryo bwikora kuvugurura Bootstrap kugendana cyangwa gutondekanya amatsinda yibice ukurikije umwanya wizingo kugirango werekane umurongo urimo gukora muburyo bwo kureba.
Uburyo ikora
Scrollspy ifite ibisabwa bike kugirango ikore neza:
- Igomba gukoreshwa kuri Bootstrap nav ibice cyangwa urutonde rwitsinda .
- Umuzingo usaba
position: relative;
kubintu urimo kuneka, mubisanzwe<body>
. - Inanga (
<a>
) irasabwa kandi igomba kwerekana ikintu hamwe nicyoid
.
Mugihe ushyizwe mubikorwa neza, nav cyangwa urutonde rwitsinda rizavugurura bikurikije, kwimura .active
icyiciro kuva mubintu bikajya mubindi ukurikije intego zabo.
Ibikoresho bizunguruka hamwe na clavier yinjira
Niba urimo gukora ikintu kizunguruka (kitari icya <body>
), menya neza ko ufite height
igenamigambi hanyuma overflow-y: scroll;
ukagishyira mu bikorwa - hamwe na a tabindex="0"
kugirango wemeze kwinjira kuri clavier.
Urugero muri navbar
Kuzenguruka agace kari munsi ya navbar hanyuma urebe ibyiciro bikora. Ibintu byamanutse bizagaragazwa kandi.
Umutwe wa mbere
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzenguruka no kumurika.
Umutwe wa kabiri
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzenguruka no kumurika.
Umutwe wa gatatu
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzenguruka no kumurika.
Umutwe wa kane
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzenguruka no kumurika.
Umutwe wa gatanu
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzenguruka no kumurika.
<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>
Urugero hamwe na nav
Scrollspy nayo ikorana na .nav
s. Niba icyari .nav
ari .active
, ababyeyi bayo nabo bazaba .active
. Kuzenguruka agace kegereye navbar hanyuma urebe ibikorwa bikora bihinduka.
Ingingo ya 1
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzenguruka no kumurika.
Ingingo 1-1
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzenguruka no kumurika.
Ingingo ya 1-2
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzenguruka no kumurika.
Ingingo ya 2
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzenguruka no kumurika.
Ingingo ya 3
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzenguruka no kumurika.
Ingingo 3-1
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzenguruka no kumurika.
Ingingo ya 3-2
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzenguruka no kumurika.
<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>
Urugero hamwe nurutonde-itsinda
Scrollspy nayo ikorana na .list-group
s. Kuzenguruka agace kari kuruhande rwurutonde hanyuma urebe impinduka zikora.
Ingingo ya 1
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzenguruka no kumurika.
Ingingo ya 2
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzenguruka no kumurika.
Ingingo ya 3
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzenguruka no kumurika.
Ingingo ya 4
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzenguruka no kumurika.
<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>
Ikoreshwa
Binyuze mu biranga amakuru
Kugirango wongere byoroshye imyitwarire ya scrollspy kumurongo wawe wo hejuru, ongera kubintu ushaka kuneka data-bs-spy="scroll"
(mubisanzwe ibi byaba aribyo <body>
). Noneho ongeraho data-bs-target
ikiranga hamwe nindangamuntu cyangwa urwego rwibintu byababyeyi .nav
bigize 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>
Binyuze kuri JavaScript
Nyuma yo kongera position: relative;
muri CSS yawe, hamagara umuzingo ukoresheje JavaScript:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Intego z'indangamuntu zikemurwa zisabwa
Imiyoboro ya Navbar igomba kuba ifite intego id idakemuka. Kurugero, <a href="#home">home</a>
hagomba guhura nibintu muri DOM nka <div id="home"></div>
.
Ibintu bitagaragara intego yibintu birengagijwe
Intego yibintu bitagaragara izirengagizwa kandi ibintu bihuye nabyo ntibizigera bigaragara.
Uburyo
humura
Mugihe ukoresheje umuzingo ufatanije no kongera cyangwa gukuraho ibintu muri DOM, uzakenera guhamagara uburyo bushya nka gutya:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
guta
Gusenya ikintu cyizingo. (Kuraho amakuru yabitswe kubintu bya DOM)
Kubona
Uburyo buhagaze butuma ubona urugero rwa scrollspy ifitanye isano na DOM element
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
GetOrCreateInstance
Uburyo buhamye butuma ubona urugero rwa scrollspy rujyanye nibintu bya DOM, cyangwa gukora bundi bushya mugihe bitatangijwe
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Amahitamo
Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-bs-
, Nka Muri data-bs-offset=""
.
Izina | Andika | Mburabuzi | Ibisobanuro |
---|---|---|---|
offset |
umubare | 10 |
Pixels kugirango uve hejuru iyo ubaze umwanya wumuzingo. |
method |
umugozi | auto |
Shakisha igice igice cyubutasi kirimo. auto Bizahitamo uburyo bwiza bwo kubona imizingo. offset azakoresha Element.getBoundingClientRect() uburyo bwo kubona umuzingo uhuza. position izakoresha i HTMLElement.offsetTop na HTMLElement.offsetLeft imitungo kugirango ubone umuzingo uhuza. |
target |
umugozi | Ikintu cyibibazo | Ikintu cya DOM | Kugaragaza ikintu cyo gukoresha plugin ya Scrollspy. |
Ibyabaye
Ubwoko bwibyabaye | Ibisobanuro |
---|---|
activate.bs.scrollspy |
Ibirori birasa kumuzingo igihe cyose ikintu gishya gihinduwe na muzingo. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})