Scrollspy
Hoʻohou ʻakomi i ka hoʻokele Bootstrap a i ʻole ka papa inoa o nā ʻāpana hui e pili ana i ke kūlana ʻōwili e hōʻike i ka loulou e hana nei i kēia manawa ma ka viewport.
Pehea e hana ai
Loaʻa iā Scrollspy kekahi mau koi e hana pono ai:
- Pono e hoʻohana ʻia ma kahi ʻāpana Bootstrap nav a i ʻole pūʻulu papa inoa .
- Pono ʻo Scrollspy i
position: relative;
ka mea āu e mākaʻikaʻi nei, maʻamau ka<body>
. - Pono nā heleuma (
<a>
) a pono e kuhikuhi i kahi mea me kēlāid
.
Ke hoʻokō maikaʻi ʻia, e hōʻano hou kāu nav a i ʻole pūʻulu papa inoa e like me ka neʻe ʻana o ka .active
papa mai kahi mea a i kekahi mea e pili ana i kā lākou mau pahuhopu pili.
ʻO nā ipu ʻōwili a me ka loaʻa ʻana o ka papa keyboard
Inā ʻoe e hana nei i kahi pahu scrollable (ma waho aʻe o ka <body>
), e hōʻoia e loaʻa kahi height
hoʻonohonoho a overflow-y: scroll;
hoʻopili iā ia-me ka ʻaoʻao tabindex="0"
e hōʻoia i ke komo ʻana o ka keyboard.
Laʻana ma navbar
E ʻōwili i ka ʻāpana ma lalo o ka navbar a nānā i ka loli o ka papa hana. E hōʻike ʻia nā mea hāʻule i lalo.
Poʻomanaʻo mua
ʻO kēia kekahi maʻiʻo placeholder no ka ʻaoʻao scrollspy. E hoʻomanaʻo i ka wā e kaomi ai ʻoe i lalo o ka ʻaoʻao, ua hōʻike ʻia ka loulou hoʻokele kūpono. Hoʻopuka hou ʻia i loko o ka laʻana ʻāpana. Hoʻohui mākou i kekahi kope kope hou aʻe ma ʻaneʻi e hoʻoikaika i ka ʻōwili ʻana a me ka hōʻailona.
Poʻomanaʻo ʻelua
ʻO kēia kekahi maʻiʻo placeholder no ka ʻaoʻao scrollspy. E hoʻomanaʻo i ka wā e kaomi ai ʻoe i lalo o ka ʻaoʻao, ua hōʻike ʻia ka loulou hoʻokele kūpono. Hoʻopuka hou ʻia i loko o ka laʻana ʻāpana. Hoʻohui mākou i kekahi kope kope hou aʻe ma ʻaneʻi e hoʻoikaika i ka ʻōwili ʻana a me ka hōʻailona.
Poʻomanaʻo ʻekolu
ʻO kēia kekahi maʻiʻo placeholder no ka ʻaoʻao scrollspy. E hoʻomanaʻo i ka wā e kaomi ai ʻoe i lalo o ka ʻaoʻao, ua hōʻike ʻia ka loulou hoʻokele kūpono. Hoʻopuka hou ʻia i loko o ka laʻana ʻāpana. Hoʻohui mākou i kekahi kope kope hou aʻe ma ʻaneʻi e hoʻoikaika i ka ʻōwili ʻana a me ka hōʻailona.
Poʻomanaʻo ʻehā
ʻO kēia kekahi maʻiʻo placeholder no ka ʻaoʻao scrollspy. E hoʻomanaʻo i ka wā e kaomi ai ʻoe i lalo o ka ʻaoʻao, ua hōʻike ʻia ka loulou hoʻokele kūpono. Hoʻopuka hou ʻia i loko o ka laʻana ʻāpana. Hoʻohui mākou i kekahi kope kope hou aʻe ma ʻaneʻi e hoʻoikaika i ka ʻōwili ʻana a me ka hōʻailona.
Poʻomanaʻo ʻelima
ʻO kēia kekahi maʻiʻo placeholder no ka ʻaoʻao scrollspy. E hoʻomanaʻo i ka wā e kaomi ai ʻoe i lalo o ka ʻaoʻao, ua hōʻike ʻia ka loulou hoʻokele kūpono. Hoʻopuka hou ʻia i loko o ka laʻana ʻāpana. Hoʻohui mākou i kekahi kope kope hou aʻe ma ʻaneʻi e hoʻoikaika i ka ʻōwili ʻana a me ka hōʻailona.
<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>
Laʻana me ka nested nav
Hana pū ʻo Scrollspy me nā nested .nav
s. Inā he pūnana .nav
, ʻo .active
kona mau mākua pū kekahi .active
. E ʻōwili i ka ʻāpana e pili ana i ka navbar a nānā i ka hoʻololi ʻana o ka papa hana.
'ikamu 1
ʻO kēia kekahi maʻiʻo placeholder no ka ʻaoʻao scrollspy. E hoʻomanaʻo i ka wā e kaomi ai ʻoe i lalo o ka ʻaoʻao, ua hōʻike ʻia ka loulou hoʻokele kūpono. Hoʻopuka hou ʻia i loko o ka laʻana ʻāpana. Hoʻohui mākou i kekahi kope kope hou aʻe ma ʻaneʻi e hoʻoikaika i ka ʻōwili ʻana a me ka hōʻailona.
Kumuhana 1-1
ʻO kēia kekahi maʻiʻo placeholder no ka ʻaoʻao scrollspy. E hoʻomanaʻo i ka wā e kaomi ai ʻoe i lalo o ka ʻaoʻao, ua hōʻike ʻia ka loulou hoʻokele kūpono. Hoʻopuka hou ʻia i loko o ka laʻana ʻāpana. Hoʻohui mākou i kekahi kope kope hou aʻe ma ʻaneʻi e hoʻoikaika i ka ʻōwili ʻana a me ka hōʻailona.
'ikamu 1-2
ʻO kēia kekahi maʻiʻo placeholder no ka ʻaoʻao scrollspy. E hoʻomanaʻo i ka wā e kaomi ai ʻoe i lalo o ka ʻaoʻao, ua hōʻike ʻia ka loulou hoʻokele kūpono. Hoʻopuka hou ʻia i loko o ka laʻana ʻāpana. Hoʻohui mākou i kekahi kope kope hou aʻe ma ʻaneʻi e hoʻoikaika i ka ʻōwili ʻana a me ka hōʻailona.
'ikamu 2
ʻO kēia kekahi maʻiʻo placeholder no ka ʻaoʻao scrollspy. E hoʻomanaʻo i ka wā e kaomi ai ʻoe i lalo o ka ʻaoʻao, ua hōʻike ʻia ka loulou hoʻokele kūpono. Hoʻopuka hou ʻia i loko o ka laʻana ʻāpana. Hoʻohui mākou i kekahi kope kope hou aʻe ma ʻaneʻi e hoʻoikaika i ka ʻōwili ʻana a me ka hōʻailona.
'ikamu 3
ʻO kēia kekahi maʻiʻo placeholder no ka ʻaoʻao scrollspy. E hoʻomanaʻo i ka wā e kaomi ai ʻoe i lalo o ka ʻaoʻao, ua hōʻike ʻia ka loulou hoʻokele kūpono. Hoʻopuka hou ʻia i loko o ka laʻana ʻāpana. Hoʻohui mākou i kekahi kope kope hou aʻe ma ʻaneʻi e hoʻoikaika i ka ʻōwili ʻana a me ka hōʻailona.
Kumuhana 3-1
ʻO kēia kekahi maʻiʻo placeholder no ka ʻaoʻao scrollspy. E hoʻomanaʻo i ka wā e kaomi ai ʻoe i lalo o ka ʻaoʻao, ua hōʻike ʻia ka loulou hoʻokele kūpono. Hoʻopuka hou ʻia i loko o ka laʻana ʻāpana. Hoʻohui mākou i kekahi kope kope hou aʻe ma ʻaneʻi e hoʻoikaika i ka ʻōwili ʻana a me ka hōʻailona.
Kumuhana 3-2
ʻO kēia kekahi maʻiʻo placeholder no ka ʻaoʻao scrollspy. E hoʻomanaʻo i ka wā e kaomi ai ʻoe i lalo o ka ʻaoʻao, ua hōʻike ʻia ka loulou hoʻokele kūpono. Hoʻopuka hou ʻia i loko o ka laʻana ʻāpana. Hoʻohui mākou i kekahi kope kope hou aʻe ma ʻaneʻi e hoʻoikaika i ka ʻōwili ʻana a me ka hōʻailona.
<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>
Laʻana me ka pūʻulu papa inoa
Hana pū ʻo Scrollspy me .list-group
s. E ʻōwili i ka ʻāpana ma ka ʻaoʻao o ka pūʻulu papa inoa a nānā i ka hoʻololi ʻana o ka papa hana.
'ikamu 1
ʻO kēia kekahi maʻiʻo placeholder no ka ʻaoʻao scrollspy. E hoʻomanaʻo i ka wā e kaomi ai ʻoe i lalo o ka ʻaoʻao, ua hōʻike ʻia ka loulou hoʻokele kūpono. Hoʻopuka hou ʻia i loko o ka laʻana ʻāpana. Hoʻohui mākou i kekahi kope kope hou aʻe ma ʻaneʻi e hoʻoikaika i ka ʻōwili ʻana a me ka hōʻailona.
'ikamu 2
ʻO kēia kekahi maʻiʻo placeholder no ka ʻaoʻao scrollspy. E hoʻomanaʻo i ka wā e kaomi ai ʻoe i lalo o ka ʻaoʻao, ua hōʻike ʻia ka loulou hoʻokele kūpono. Hoʻopuka hou ʻia i loko o ka laʻana ʻāpana. Hoʻohui mākou i kekahi kope kope hou aʻe ma ʻaneʻi e hoʻoikaika i ka ʻōwili ʻana a me ka hōʻailona.
'ikamu 3
ʻO kēia kekahi maʻiʻo placeholder no ka ʻaoʻao scrollspy. E hoʻomanaʻo i ka wā e kaomi ai ʻoe i lalo o ka ʻaoʻao, ua hōʻike ʻia ka loulou hoʻokele kūpono. Hoʻopuka hou ʻia i loko o ka laʻana ʻāpana. Hoʻohui mākou i kekahi kope kope hou aʻe ma ʻaneʻi e hoʻoikaika i ka ʻōwili ʻana a me ka hōʻailona.
Kumuhana 4
ʻO kēia kekahi maʻiʻo placeholder no ka ʻaoʻao scrollspy. E hoʻomanaʻo i ka wā e kaomi ai ʻoe i lalo o ka ʻaoʻao, ua hōʻike ʻia ka loulou hoʻokele kūpono. Hoʻopuka hou ʻia i loko o ka laʻana ʻāpana. Hoʻohui mākou i kekahi kope kope hou aʻe ma ʻaneʻi e hoʻoikaika i ka ʻōwili ʻana a me ka hōʻailona.
<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>
Hoʻohana
Ma o nā hiʻohiʻona ʻikepili
No ka hoʻohui maʻalahi i ka hana scrollspy i kāu hoʻokele topbar, e hoʻohui data-bs-spy="scroll"
i ka mea āu e makemake ai e kiu (ʻo ka mea maʻamau ʻo ia ka <body>
). A laila e hoʻohui i ke data-bs-target
ʻano me ka ID a i ʻole ka papa o ka mea makua o kekahi ʻāpana 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>
Ma o JavaScript
Ma hope o ka hoʻohui position: relative;
ʻana i kāu CSS, e kāhea i ka scrollspy ma o JavaScript:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Pono nā pahuhopu ID hiki ke hoʻoholo
Pono nā loulou Navbar i nā pahuhopu id hiki ke hoʻoholo. No ka laʻana, <a href="#home">home</a>
pono e pili i kekahi mea ma ka DOM e like me <div id="home"></div>
.
Ua nānā ʻole ʻia nā mea i ʻike ʻole ʻia
E nānā ʻole ʻia nā mea i ʻike ʻole ʻia a ʻaʻole e hōʻike ʻia kā lākou mau mea nav pili.
Nā ʻano hana
hōʻano hou
Ke hoʻohana nei i ka scrollspy me ka hoʻohui a wehe ʻana paha i nā mea mai ka DOM, pono ʻoe e kāhea i ke ʻano hoʻomaha e like me:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
e hoolei aku
Hoʻopau i ka scrollspy o kekahi mea. (Wehe i ka ʻikepili i mālama ʻia ma ka mea DOM)
getInstance
ʻO ke ala static e hiki ai iā ʻoe ke kiʻi i ka laʻana scrollspy pili me kahi mea DOM
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
ʻO ke ʻano static e hiki ai iā ʻoe ke kiʻi i ka laʻana scrollspy pili me kahi mea DOM, a i ʻole hana i kahi mea hou inā ʻaʻole i hoʻomaka ʻia.
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Nā koho
Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-bs-
, e like me ka data-bs-offset=""
.
inoa | ʻAno | Default | wehewehe |
---|---|---|---|
offset |
helu | 10 |
Pikika e hoʻoneʻe mai luna mai ke helu ʻana i ke kūlana o ka ʻōwili. |
method |
kaulahao | auto |
E koho i auto ke ala maikaʻi loa e loaʻa ai nā hoʻonohonoho ʻōwili. offset e hoʻohana i ke Element.getBoundingClientRect() ala e loaʻa ai nā scroll coordinates. position e hoʻohana i ka HTMLElement.offsetTop a me HTMLElement.offsetLeft nā waiwai e kiʻi i nā hoʻonohonoho scroll. |
target |
kaula | jQuery mea | ʻElemu DOM | Hōʻike i ka mea e hoʻopili ai i ka plugin Scrollspy. |
Nā hanana
ʻAno hanana | wehewehe |
---|---|
activate.bs.scrollspy |
Hoʻomaka kēia hanana i ka mea scroll i ka wā e hoʻāla ʻia ai kahi mea hou e ka scrollspy. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})