Scrollspy ya go phuthwa
Mpshafatša ka go iketla go sepelasepela ga Bootstrap goba dikarolo tša sehlopha sa lenaneo go ya ka maemo a go sepelasepela go laetša gore ke kgokagano efe yeo e šomago gabjale ka go lefelo la go lebelela.
Kamoo e šomago ka gona
Scrollspy e na le dinyakwa tše mmalwa gore e šome gabotse:
- E swanetše go šomišwa go karolo ya nav ya Bootstrap goba sehlopha sa lenaneo .
- Scrollspy e nyaka
position: relative;ka elemente yeo o e hlolago, gantši e<body>. - Ditshetledi (
<a>) di a nyakega gomme di swanetše go šupa elemente yeo e nago le seoid.
Ge e phethagaditšwe ka katlego, sehlopha sa gago sa nav goba sa lenaneo se tla mpshafatša ka go swanela, sa šuthiša .activesehlopha go tšwa go selo se tee go ya go se se latelago go ya ka diphetho tša bona tše di amanago.
Ditshelo tšeo di ka kgokološwago le phihlelelo ya khiiboto
Ge e ba o dira setshelo seo se ka kgokološwago (ntle le <body>), kgonthišetša gore o na le heightsete gomme ya overflow-y: scroll;dirišwa go sona—go bapa le a tabindex="0"go kgonthišetša phihlelelo ya khiiboto.
Mohlala ka navbar
Scroll lefelo ka fase ga navbar gomme o lebelele phetogo ya sehlopha se se šomago. Diaetheme tša go theoga le tšona di tla hlaolwa.
Hlogo ya mathomo
Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.
Hlogo ya bobedi
Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.
Hlogo ya boraro
Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.
Hlogo ya bone
Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.
Hlogo ya bohlano
Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.
<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>
Mohlala ka nested nav
Scrollspy e šoma gape ka .navs yeo e tsentšwego ka gare ga sehlaga. Ge e ba nested .nave le .active, batswadi ba yona le bona ba tla ba .active. Scroll lefelo kgauswi le navbar gomme o lebelele phetogo ya sehlopha se se šomago.
Ntlha 1.
Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.
Ntlha ya 1-1
Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.
Ntlha ya 1-2
Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.
Ntlha ya 2.
Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.
Ntlha ya 3
Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.
Ntlha ya 3-1
Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.
Ntlha ya 3-2
Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.
<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>
Mohlala ka lenaneo-sehlopha
Scrollspy e šoma gape ka .list-groups. Scroll lefelo kgauswi le sehlopha sa lenaneo gomme o lebelele phetogo ya klase ye e šomago.
Ntlha 1.
Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.
Ntlha ya 2.
Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.
Ntlha ya 3
Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.
Ntlha ya 4.
Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.
<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>
Tšhomišo
Ka dika ya data
Go oketša gabonolo boitshwaro bja scrollspy go go sepelasepela ga gago ga topbar, oketša data-bs-spy="scroll"go elemente yeo o nyakago go e hlola (ka tlwaelo kudu se e be e tla ba <body>). Ke moka o tlaleletše data-bs-targetseka ka ID goba sehlopha sa elemente ya motswadi ya karolo efe goba efe ya 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>
Ka JavaScript
Ka morago ga go tlaleletša position: relative;ka go CSS ya gago, bitša scrollspy ka JavaScript:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Diphetho tša ID tšeo di ka rarollwago di a nyakega
Dikgokagano tša Navbar di swanetše go ba le diphetho tša id tšeo di ka rarollwago. Go fa mohlala, a e <a href="#home">home</a>swanetše go sepelelana le selo se sengwe ka go DOM go swana le <div id="home"></div>.
Dielemente tša nepišo tšeo di sa bonagalego di hlokomologwa
Dielemente tša nepišo tšeo di sa bonagalego di tla hlokomologwa gomme dilo tša tšona tša nav tše di sepelelanago di ka se tsoge di hlaotšwe.
Mekgwa ya go šoma
hlabolla
Ge o diriša scrollspy ka kopanelo le go tlaleletša goba go tloša dielemente go tšwa go DOM, o tla swanelwa ke go bitša mokgwa wa go hlabolla go swana le bjalo:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
lahla
E senya scrollspy ya elemente. (E tloša ya data ye e bolokilwego go elemente ya DOM)
hwetšaMohlala
Mokgwa wa go se fetoge wo o go dumelelago go hwetša mohlala wa scrollspy wo o amanago le elemente ya DOM
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
hwetšaGobaHlamaMohlala
Mokgwa wa go se fetoge wo o go dumelelago go hwetša mohlala wa scrollspy wo o amanago le elemente ya DOM, goba go hlama ye mpsha ge go ka direga gore e be e sa thongwa
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Dikgetho
Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-bs-, bjalo ka go data-bs-offset="".
| Leina | Mohuta | Hlokomologa | Tlhalošo |
|---|---|---|---|
offset |
nomoro | 10 |
Dipiksele go offset go tšwa godimo ge o bala boemo bja go phurolla. |
method |
thapo | auto |
E hwetša gore ke karolo efe yeo elemente ya dihlodi e lego go yona e autotla kgetha mokgwa wo mokaone wa go hwetša dihlomathišo tša go kgokološa. offsettla diriša Element.getBoundingClientRect()mokgwa wa go hwetša dihlomathišo tša go phurolla. positione tla šomiša dithoto tša HTMLElement.offsetTople HTMLElement.offsetLeftgo hwetša dihlomathišo tša go sepelasepela. |
target |
thapo ya | jQuery selo sa | DOM elemente | E laetša elemente ya go diriša polaka ya Scrollspy. |
Ditiragalo
| Mohuta wa tiragalo | Tlhalošo |
|---|---|
activate.bs.scrollspy |
Tiragalo ye e thunya godimo ga elemente ya go phuthwa neng le neng ge selo se sefsa se thoma go šomišwa ke scrollspy. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})