Scrollspy
Sabunta kewayawa ta Bootstrap ta atomatik ko jera abubuwan rukuni bisa ga matsayin gungura don nuna wace hanyar haɗin ke aiki a halin yanzu a tashar kallo.
Yadda yake aiki
Scrollspy yana da ƴan buƙatu don yin aiki da kyau:
- Dole ne a yi amfani da shi akan bangaren Bootstrap nav ko jerin rukuni .
- Scrollspy yana buƙatar
position: relative;
abubuwan da kuke leƙo asirin ƙasa, yawanci<body>
. - Ana buƙatar anka (
<a>
) kuma dole ne su nuna wani kashi mai wannanid
.
Lokacin da aka yi nasarar aiwatarwa, nav ɗinku ko ƙungiyar jeri za su ɗaukaka daidai da haka, suna matsar da .active
ajin daga abu ɗaya zuwa na gaba dangane da makasudin haɗin gwiwa.
Kwantena masu gungurawa da shiga madannai
Idan kana yin akwati mai gungurawa (banda na <body>
), tabbatar da samun height
saiti kuma overflow-y: scroll;
a yi amfani da shi — tare da tabindex="0"
tabbatar da samun damar madannai.
Misali a cikin navbar
Gungura wurin da ke ƙasa da maɓallin kewayawa kuma duba canjin aji mai aiki. Za a kuma haskaka abubuwan da aka zazzage su ma.
Tafarki na farko
Wannan wasu abun ciki ne mai riƙe wuri don shafin scrollspy. Lura cewa yayin da kuke gungurawa ƙasa shafin, ana haskaka hanyar kewayawa da ta dace. Ana maimaita shi a cikin misalin bangaren. Muna ci gaba da ƙara wasu kwafin misali anan don jaddada gungurawa da haskakawa.
Take na biyu
Wannan wasu abun ciki ne mai riƙe wuri don shafin scrollspy. Lura cewa yayin da kuke gungurawa ƙasa shafin, ana haskaka hanyar kewayawa da ta dace. Ana maimaita shi a cikin misalin bangaren. Muna ci gaba da ƙara wasu kwafin misali anan don jaddada gungurawa da haskakawa.
Take na uku
Wannan wasu abun ciki ne mai riƙe wuri don shafin scrollspy. Lura cewa yayin da kuke gungurawa ƙasa shafin, ana haskaka hanyar kewayawa da ta dace. Ana maimaita shi a cikin misalin bangaren. Muna ci gaba da ƙara wasu kwafin misali anan don jaddada gungurawa da haskakawa.
Tafi na hudu
Wannan wasu abun ciki ne mai riƙe wuri don shafin scrollspy. Lura cewa yayin da kuke gungurawa ƙasa shafin, ana haskaka hanyar kewayawa da ta dace. Ana maimaita shi a cikin misalin bangaren. Muna ci gaba da ƙara wasu kwafin misali anan don jaddada gungurawa da haskakawa.
Tafi na biyar
Wannan wasu abun ciki ne mai riƙe wuri don shafin scrollspy. Lura cewa yayin da kuke gungurawa ƙasa shafin, ana haskaka hanyar kewayawa da ta dace. Ana maimaita shi a cikin misalin bangaren. Muna ci gaba da ƙara wasu kwafin misali anan don jaddada gungurawa da haskakawa.
<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>
Misali tare da nav
Scrollspy kuma yana aiki tare da nsted .nav
s. Idan gida .nav
ne .active
, iyayensa ma za su kasance .active
. Gungura wurin da ke kusa da maɓallin kewayawa kuma duba canjin aji mai aiki.
Abu na 1
Wannan wasu abun ciki ne mai riƙe wuri don shafin scrollspy. Lura cewa yayin da kuke gungurawa ƙasa shafin, ana haskaka hanyar kewayawa da ta dace. Ana maimaita shi a cikin misalin bangaren. Muna ci gaba da ƙara wasu kwafin misali anan don jaddada gungurawa da haskakawa.
Abu na 1-1
Wannan wasu abun ciki ne mai riƙe wuri don shafin scrollspy. Lura cewa yayin da kuke gungurawa ƙasa shafin, ana haskaka hanyar kewayawa da ta dace. Ana maimaita shi a cikin misalin bangaren. Muna ci gaba da ƙara wasu kwafin misali anan don jaddada gungurawa da haskakawa.
Abu na 1-2
Wannan wasu abun ciki ne mai riƙe wuri don shafin scrollspy. Lura cewa yayin da kuke gungurawa ƙasa shafin, ana haskaka hanyar kewayawa da ta dace. Ana maimaita shi a cikin misalin bangaren. Muna ci gaba da ƙara wasu kwafin misali anan don jaddada gungurawa da haskakawa.
Abu na 2
Wannan wasu abun ciki ne mai riƙe wuri don shafin scrollspy. Lura cewa yayin da kuke gungurawa ƙasa shafin, ana haskaka hanyar kewayawa da ta dace. Ana maimaita shi a cikin misalin bangaren. Muna ci gaba da ƙara wasu kwafin misali anan don jaddada gungurawa da haskakawa.
Abu na 3
Wannan wasu abun ciki ne mai riƙe wuri don shafin scrollspy. Lura cewa yayin da kuke gungurawa ƙasa shafin, ana haskaka hanyar kewayawa da ta dace. Ana maimaita shi a cikin misalin bangaren. Muna ci gaba da ƙara wasu kwafin misali anan don jaddada gungurawa da haskakawa.
Abu na 3-1
Wannan wasu abun ciki ne mai riƙe wuri don shafin scrollspy. Lura cewa yayin da kuke gungurawa ƙasa shafin, ana haskaka hanyar kewayawa da ta dace. Ana maimaita shi a cikin misalin bangaren. Muna ci gaba da ƙara wasu kwafin misali anan don jaddada gungurawa da haskakawa.
Abu na 3-2
Wannan wasu abun ciki ne mai riƙe wuri don shafin scrollspy. Lura cewa yayin da kuke gungurawa ƙasa shafin, ana haskaka hanyar kewayawa da ta dace. Ana maimaita shi a cikin misalin bangaren. Muna ci gaba da ƙara wasu kwafin misali anan don jaddada gungurawa da haskakawa.
<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>
Misali tare da rukuni-rukuni
Scrollspy kuma yana aiki tare da .list-group
s. Gungura yankin kusa da rukunin jerin kuma duba canjin aji mai aiki.
Abu na 1
Wannan wasu abun ciki ne mai riƙe wuri don shafin scrollspy. Lura cewa yayin da kuke gungurawa ƙasa shafin, ana haskaka hanyar kewayawa da ta dace. Ana maimaita shi a cikin misalin bangaren. Muna ci gaba da ƙara wasu kwafin misali anan don jaddada gungurawa da haskakawa.
Abu na 2
Wannan wasu abun ciki ne mai riƙe wuri don shafin scrollspy. Lura cewa yayin da kuke gungurawa ƙasa shafin, ana haskaka hanyar kewayawa da ta dace. Ana maimaita shi a cikin misalin bangaren. Muna ci gaba da ƙara wasu kwafin misali anan don jaddada gungurawa da haskakawa.
Abu na 3
Wannan wasu abun ciki ne mai riƙe wuri don shafin scrollspy. Lura cewa yayin da kuke gungurawa ƙasa shafin, ana haskaka hanyar kewayawa da ta dace. Ana maimaita shi a cikin misalin bangaren. Muna ci gaba da ƙara wasu kwafin misali anan don jaddada gungurawa da haskakawa.
Abu na 4
Wannan wasu abun ciki ne mai riƙe wuri don shafin scrollspy. Lura cewa yayin da kuke gungurawa ƙasa shafin, ana haskaka hanyar kewayawa da ta dace. Ana maimaita shi a cikin misalin bangaren. Muna ci gaba da ƙara wasu kwafin misali anan don jaddada gungurawa da haskakawa.
<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>
Amfani
Ta hanyar bayanan halayen
Don ƙara halayyar scrollspy cikin sauƙi zuwa kewayawa na saman mashaya, ƙara data-bs-spy="scroll"
zuwa ɓangaren da kuke son yin rahõto a kai (mafi yawanci wannan shine <body>
). Sannan ƙara data-bs-target
sifa tare da ID ko aji na ɓangaren mahaifa na kowane .nav
ɓangaren 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>
Ta hanyar JavaScript
Bayan ƙara position: relative;
a cikin CSS ɗin ku, kira gungurawa ta hanyar JavaScript:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Ana buƙatar makasudin ID mai warwarewa
Dole ne hanyoyin haɗin Navbar su kasance da maƙasudin id masu warwarewa. Misali, <a href="#home">home</a>
dole ne ya dace da wani abu a cikin DOM kamar <div id="home"></div>
.
Abubuwan da ba a ganuwa sun yi watsi da su
Abubuwan da ba a ganuwa ba za a yi watsi da su kuma ba za a taɓa haskaka abubuwan da suka dace ba.
Hanyoyin
wartsake
Lokacin amfani da scrollspy tare da ƙara ko cire abubuwa daga DOM, kuna buƙatar kiran hanyar wartsakewa kamar haka:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
jefar
Yana lalata rubutun gungurawa. (Yana cire bayanan da aka adana akan ɓangaren DOM)
samunInstance
Hanyar a tsaye wacce ke ba ku damar samun misalan gungurawa mai alaƙa da nau'in DOM
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
samunOrCreateInstance
Hanyar da ba ta dace ba wacce ke ba ku damar samun misalin scrollspy mai alaƙa da wani ɓangaren DOM, ko ƙirƙirar sabo idan ba a fara shi ba .
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Zabuka
Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-bs-
, kamar a cikin data-bs-offset=""
.
Suna | Nau'in | Default | Bayani |
---|---|---|---|
offset |
lamba | 10 |
Pixels don kashewa daga sama yayin ƙididdige matsayi na gungurawa. |
method |
kirtani | auto |
Nemo wanne yanki ne ɓangaren leƙen asiri ke ciki. auto zai zaɓi hanya mafi kyau don samun haɗin gwiwar gungurawa. offset zai yi amfani da Element.getBoundingClientRect() hanyar don samun haɗin gwiwar gungurawa. position zai yi amfani HTMLElement.offsetTop da HTMLElement.offsetLeft kaddarorin don samun haɗin gwiwar gungurawa. |
target |
zaren | jQuery abu | DOM element | Yana ƙayyade kashi don amfani da Scrollspy plugin. |
Abubuwan da suka faru
Nau'in taron | Bayani |
---|---|
activate.bs.scrollspy |
Wannan taron yana ƙone ɓangaren gungurawa a duk lokacin da sabon abu ya kunna ta hanyar gungurawa. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})