Scrollspy
Ùraich gu fèin-ghluasadach seòladh Bootstrap no liostaich co-phàirtean buidhne stèidhichte air suidheachadh scrollaidh gus sealltainn dè an ceangal a tha gnìomhach sa phort-seallaidh an-dràsta.
Mar a tha e ag obair
Tha grunn riatanasan aig Scrollspy gus obrachadh gu ceart:
- Feumar a chleachdadh air co- phàirt Bootstrap nav no buidheann liosta .
- Feumaidh Scrollspy
position: relative;
an eileamaid air a bheil thu a’ brathadh, mar as trice am faidhle<body>
. - Tha feum air acraichean (
<a>
) agus feumaidh iad eileamaid a chomharrachadh le sinid
.
Nuair a thèid a chuir an gnìomh gu soirbheachail, bheir do bhuidheann seòlaidh no liosta ùrachadh a rèir sin, a’ gluasad a’ .active
chlas bho aon nì chun ath fhear stèidhichte air na targaidean co-cheangailte riutha.
Soithichean scrollable agus ruigsinneachd meur-chlàr
Ma tha thu a’ dèanamh soitheach scrollable (a bharrachd air an <body>
), dèan cinnteach gu bheil height
seata agad agus gun cuir thu a- overflow-y: scroll;
steach e - ri taobh inneal tabindex="0"
gus dèanamh cinnteach gum bi cothrom air meur-chlàr.
Eisimpleir ann an navbar
Scrollaich an raon fon bhàr seòlaidh agus cùm sùil air an atharrachadh clas gnìomhach. Thèid na stuthan tuiteam-sìos a chomharrachadh cuideachd.
A' chiad cheann
Seo cuid de shusbaint neach-àite airson an duilleag scrollspy. Thoir an aire nuair a sgrolaicheas tu sìos an duilleag, gu bheil an ceangal seòlaidh iomchaidh air a chomharrachadh. Tha e air ath-aithris air feadh an eisimpleir co-phàirteach. Bidh sinn a’ cur beagan a bharrachd leth-bhreac eisimpleir ris an seo gus cuideam a chuir air an scrollaidh agus an soilleireachadh.
An dara ceann
Seo cuid de shusbaint neach-àite airson an duilleag scrollspy. Thoir an aire nuair a sgrolaicheas tu sìos an duilleag, gu bheil an ceangal seòlaidh iomchaidh air a chomharrachadh. Tha e air ath-aithris air feadh an eisimpleir co-phàirteach. Bidh sinn a’ cur beagan a bharrachd leth-bhreac eisimpleir ris an seo gus cuideam a chuir air an scrollaidh agus an soilleireachadh.
An treas ceann
Seo cuid de shusbaint neach-àite airson an duilleag scrollspy. Thoir an aire nuair a sgrolaicheas tu sìos an duilleag, gu bheil an ceangal seòlaidh iomchaidh air a chomharrachadh. Tha e air ath-aithris air feadh an eisimpleir co-phàirteach. Bidh sinn a’ cur beagan a bharrachd leth-bhreac eisimpleir ris an seo gus cuideam a chuir air an scrollaidh agus an soilleireachadh.
An ceathramh ceann
Seo cuid de shusbaint neach-àite airson an duilleag scrollspy. Thoir an aire nuair a sgrolaicheas tu sìos an duilleag, gu bheil an ceangal seòlaidh iomchaidh air a chomharrachadh. Tha e air ath-aithris air feadh an eisimpleir co-phàirteach. Bidh sinn a’ cur beagan a bharrachd leth-bhreac eisimpleir ris an seo gus cuideam a chuir air an scrollaidh agus an soilleireachadh.
An còigeamh ceann
Seo cuid de shusbaint neach-àite airson an duilleag scrollspy. Thoir an aire nuair a sgrolaicheas tu sìos an duilleag, gu bheil an ceangal seòlaidh iomchaidh air a chomharrachadh. Tha e air ath-aithris air feadh an eisimpleir co-phàirteach. Bidh sinn a’ cur beagan a bharrachd leth-bhreac eisimpleir ris an seo gus cuideam a chuir air an scrollaidh agus an soilleireachadh.
<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>
Eisimpleir le neadachadh nav
Scrollspy cuideachd ag obair le neadachadh .nav
s. .nav
Ma tha nead .active
, bidh a phàrantan cuideachd .active
. Scrollaich an raon ri taobh a’ bhàr seòlaidh agus cùm sùil air an atharrachadh clas gnìomhach.
Nì 1
Seo cuid de shusbaint neach-àite airson an duilleag scrollspy. Thoir an aire nuair a sgrolaicheas tu sìos an duilleag, gu bheil an ceangal seòlaidh iomchaidh air a chomharrachadh. Tha e air ath-aithris air feadh an eisimpleir co-phàirteach. Bidh sinn a’ cur beagan a bharrachd leth-bhreac eisimpleir ris an seo gus cuideam a chuir air an scrollaidh agus an soilleireachadh.
Nì 1-1
Seo cuid de shusbaint neach-àite airson an duilleag scrollspy. Thoir an aire nuair a sgrolaicheas tu sìos an duilleag, gu bheil an ceangal seòlaidh iomchaidh air a chomharrachadh. Tha e air ath-aithris air feadh an eisimpleir co-phàirteach. Bidh sinn a’ cur beagan a bharrachd leth-bhreac eisimpleir ris an seo gus cuideam a chuir air an scrollaidh agus an soilleireachadh.
Nì 1-2
Seo cuid de shusbaint neach-àite airson an duilleag scrollspy. Thoir an aire nuair a sgrolaicheas tu sìos an duilleag, gu bheil an ceangal seòlaidh iomchaidh air a chomharrachadh. Tha e air ath-aithris air feadh an eisimpleir co-phàirteach. Bidh sinn a’ cur beagan a bharrachd leth-bhreac eisimpleir ris an seo gus cuideam a chuir air an scrollaidh agus an soilleireachadh.
Nì 2
Seo cuid de shusbaint neach-àite airson an duilleag scrollspy. Thoir an aire nuair a sgrolaicheas tu sìos an duilleag, gu bheil an ceangal seòlaidh iomchaidh air a chomharrachadh. Tha e air ath-aithris air feadh an eisimpleir co-phàirteach. Bidh sinn a’ cur beagan a bharrachd leth-bhreac eisimpleir ris an seo gus cuideam a chuir air an scrollaidh agus an soilleireachadh.
Nì 3
Seo cuid de shusbaint neach-àite airson an duilleag scrollspy. Thoir an aire nuair a sgrolaicheas tu sìos an duilleag, gu bheil an ceangal seòlaidh iomchaidh air a chomharrachadh. Tha e air ath-aithris air feadh an eisimpleir co-phàirteach. Bidh sinn a’ cur beagan a bharrachd leth-bhreac eisimpleir ris an seo gus cuideam a chuir air an scrollaidh agus an soilleireachadh.
Nì 3-1
Seo cuid de shusbaint neach-àite airson an duilleag scrollspy. Thoir an aire nuair a sgrolaicheas tu sìos an duilleag, gu bheil an ceangal seòlaidh iomchaidh air a chomharrachadh. Tha e air ath-aithris air feadh an eisimpleir co-phàirteach. Bidh sinn a’ cur beagan a bharrachd leth-bhreac eisimpleir ris an seo gus cuideam a chuir air an scrollaidh agus an soilleireachadh.
Nì 3-2
Seo cuid de shusbaint neach-àite airson an duilleag scrollspy. Thoir an aire nuair a sgrolaicheas tu sìos an duilleag, gu bheil an ceangal seòlaidh iomchaidh air a chomharrachadh. Tha e air ath-aithris air feadh an eisimpleir co-phàirteach. Bidh sinn a’ cur beagan a bharrachd leth-bhreac eisimpleir ris an seo gus cuideam a chuir air an scrollaidh agus an soilleireachadh.
<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>
Eisimpleir le buidheann liosta
Scrollspy cuideachd ag obair le .list-group
s. Sgrolaich an raon ri taobh a’ bhuidheann liosta agus coimhead air an atharrachadh clas gnìomhach.
Nì 1
Seo cuid de shusbaint neach-àite airson an duilleag scrollspy. Thoir an aire nuair a sgrolaicheas tu sìos an duilleag, gu bheil an ceangal seòlaidh iomchaidh air a chomharrachadh. Tha e air ath-aithris air feadh an eisimpleir co-phàirteach. Bidh sinn a’ cur beagan a bharrachd leth-bhreac eisimpleir ris an seo gus cuideam a chuir air an scrollaidh agus an soilleireachadh.
Nì 2
Seo cuid de shusbaint neach-àite airson an duilleag scrollspy. Thoir an aire nuair a sgrolaicheas tu sìos an duilleag, gu bheil an ceangal seòlaidh iomchaidh air a chomharrachadh. Tha e air ath-aithris air feadh an eisimpleir co-phàirteach. Bidh sinn a’ cur beagan a bharrachd leth-bhreac eisimpleir ris an seo gus cuideam a chuir air an scrollaidh agus an soilleireachadh.
Nì 3
Seo cuid de shusbaint neach-àite airson an duilleag scrollspy. Thoir an aire nuair a sgrolaicheas tu sìos an duilleag, gu bheil an ceangal seòlaidh iomchaidh air a chomharrachadh. Tha e air ath-aithris air feadh an eisimpleir co-phàirteach. Bidh sinn a’ cur beagan a bharrachd leth-bhreac eisimpleir ris an seo gus cuideam a chuir air an scrollaidh agus an soilleireachadh.
Nì 4
Seo cuid de shusbaint neach-àite airson an duilleag scrollspy. Thoir an aire nuair a sgrolaicheas tu sìos an duilleag, gu bheil an ceangal seòlaidh iomchaidh air a chomharrachadh. Tha e air ath-aithris air feadh an eisimpleir co-phàirteach. Bidh sinn a’ cur beagan a bharrachd leth-bhreac eisimpleir ris an seo gus cuideam a chuir air an scrollaidh agus an soilleireachadh.
<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>
Cleachdadh
Tro fheartan dàta
Gus giùlan scrollaidh a chuir ris an t-seòladh bàr-mullaich agad gu furasta, cuir data-bs-spy="scroll"
ris an eileamaid a tha thu airson brath a ghabhail air (mar as trice b’ e seo am faidhle <body>
). An uairsin cuir am data-bs-target
feart leis an ID no clas na h-eileamaid phàrant de phàirt Bootstrap sam bith .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>
Air sgàth javascript
Às deidh position: relative;
dhut do CSS a chuir a-steach, cuir fios chun scrollspy tro JavaScript:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Tha feum air targaidean ID so-rèiteach
Feumaidh targaidean id fhuasgladh a bhith aig ceanglaichean Navbar. Mar eisimpleir, <a href="#home">home</a>
feumaidh rudeigin a bhith a rèir rudeigin san DOM mar <div id="home"></div>
.
Cha deach aire a thoirt do eileamaidean targaid neo-fhaicsinneach
Cha tèid aire a thoirt do eileamaidean targaid nach eil rim faicinn agus cha tèid na nithean seòlaidh co-fhreagarrach aca a chomharrachadh gu bràth.
Dòighean-obrach
ùraich
Nuair a bhios tu a’ cleachdadh scrollspy an co-bhonn ri cur-ris no toirt air falbh eileamaidean bhon DOM, feumaidh tu an dòigh ùrachaidh a ghairm mar seo:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
cuidhteas
A 'sgrios scrollspy eileamaid. (Thoir air falbh dàta air a stòradh air an eileamaid DOM)
faighinn a-mach
Modh statach a leigeas leat an eisimpleir scrollspy fhaighinn co-cheangailte ri eileamaid DOM
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
faighOrCreateInstance
Dòigh statach a leigeas leat an eisimpleir scrollspy fhaighinn co-cheangailte ri eileamaid DOM, no fear ùr a chruthachadh gun fhios nach deach a thòiseachadh
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Roghainnean
Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-bs-
, mar ann an data-bs-offset=""
.
Ainm | Seòrsa | Deònach | Tuairisgeul |
---|---|---|---|
offset |
àireamh | 10 |
Pixels ri chothromachadh bhon mhullach nuair a thathar a’ tomhas suidheachadh an scrollaidh. |
method |
sreang | auto |
Lorgaidh e dè an earrann anns a bheil an eileamaid spìosrach. auto taghaidh e an dòigh as fheàrr airson co-chomharran scrollaidh fhaighinn. offset cleachdaidh e an Element.getBoundingClientRect() dòigh gus co-chomharran scrollaidh fhaighinn. position cleachdaidh e na feartan HTMLElement.offsetTop agus na HTMLElement.offsetLeft feartan gus co-chomharran scrollaidh fhaighinn. |
target |
sreang | nì jQuery | eileamaid DOM | Sònraich eileamaid airson plugan Scrollspy a chuir an sàs. |
Tachartasan
Seòrsa tachartas | Tuairisgeul |
---|---|
activate.bs.scrollspy |
Bidh an tachartas seo a’ losgadh air an eileamaid scrollaidh nuair a thèid rud ùr a chuir an gnìomh leis an scrollspy. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})