Nwoma mmobɔwee
Yɛ Bootstrap navigation anaa list group components a egyina scroll gyinabea so no foforo ankasa de kyerɛ link a ɛreyɛ adwuma mprempren wɔ viewport no mu.
Sɛnea ɛyɛ adwuma
Scrollspy wɔ ahwehwɛde kakraa bi na ama ayɛ adwuma yiye:
- Ɛsɛ sɛ wɔde di dwuma wɔ Bootstrap nav component anaa list group so .
- Scrollspy hwehwɛ
position: relative;
wɔ element a woreyɛ akwansra so no so, mpɛn pii no<body>
. - Ankora (
<a>
) ho hia na ɛsɛ sɛ ɛkyerɛ element bi a ɛwɔ saaid
.
Sɛ wɔde di dwuma yiye a, wo nav anaa list kuw no bɛsesa sɛnea ɛfata, de .active
adesuakuw no afi ade biako so akɔ foforo so a egyina wɔn botae ahorow a ɛbata ho so.
Nneɛma a wɔde hyɛ mu ne keyboard a wɔde hyɛ mu
Sɛ woreyɛ ade a wotumi twetwe (a ɛnyɛ <body>
) a, hwɛ hu sɛ wowɔ height
set na wode adi overflow-y: scroll;
dwuma wɔ so—a ɛka a ho tabindex="0"
na ama woahwɛ ahu sɛ wobɛkɔ keyboard so.
Nhwɛso wɔ navbar mu
Twe beae a ɛwɔ navbar no ase no na hwɛ adesuakuw a ɛreyɛ adwuma no nsakrae. Wɔbɛtwe adwene asi nneɛma a ɛwɔ ase hɔ no so nso.
Asɛmti a edi kan
Eyi yɛ beae bi a ɛwɔ nsɛm a ɛwɔ scrollspy krataafa no mu. Hyɛ no nsow sɛ bere a worekɔ kratafa no ase no, wobɛtwe adwene asi navigation link a ɛfata no so. Wɔasan ayɛ no bio wɔ component nhwɛso no nyinaa mu. Yɛkɔ so de nhwɛso bi foforo bi ka ho wɔ ha de si nhoma mmobɔwee ne nea wɔasi so dua no so dua.
Asɛmti a ɛto so abien
Eyi yɛ beae bi a ɛwɔ nsɛm a ɛwɔ scrollspy krataafa no mu. Hyɛ no nsow sɛ bere a worekɔ kratafa no ase no, wobɛtwe adwene asi navigation link a ɛfata no so. Wɔasan ayɛ no bio wɔ component nhwɛso no nyinaa mu. Yɛkɔ so de nhwɛso bi foforo bi ka ho wɔ ha de si nhoma mmobɔwee ne nea wɔasi so dua no so dua.
Asɛmti a ɛto so abiɛsa
Eyi yɛ beae bi a ɛwɔ nsɛm a ɛwɔ scrollspy krataafa no mu. Hyɛ no nsow sɛ bere a worekɔ kratafa no ase no, wobɛtwe adwene asi navigation link a ɛfata no so. Wɔasan ayɛ no bio wɔ component nhwɛso no nyinaa mu. Yɛkɔ so de nhwɛso bi foforo bi ka ho wɔ ha de si nhoma mmobɔwee ne nea wɔasi so dua no so dua.
Asɛmti a ɛto so anan
Eyi yɛ beae bi a ɛwɔ nsɛm a ɛwɔ scrollspy krataafa no mu. Hyɛ no nsow sɛ bere a worekɔ kratafa no ase no, wobɛtwe adwene asi navigation link a ɛfata no so. Wɔasan ayɛ no bio wɔ component nhwɛso no nyinaa mu. Yɛkɔ so de nhwɛso bi foforo bi ka ho wɔ ha de si nhoma mmobɔwee ne nea wɔasi so dua no so dua.
Asɛmti a ɛto so anum
Eyi yɛ beae bi a ɛwɔ nsɛm a ɛwɔ scrollspy krataafa no mu. Hyɛ no nsow sɛ bere a worekɔ kratafa no ase no, wobɛtwe adwene asi navigation link a ɛfata no so. Wɔasan ayɛ no bio wɔ component nhwɛso no nyinaa mu. Yɛkɔ so de nhwɛso bi foforo bi ka ho wɔ ha de si nhoma mmobɔwee ne nea wɔasi so dua no so dua.
<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>
Nhwɛso a ɛne nested nav
Scrollspy nso ne nested .nav
s yɛ adwuma. Sɛ nested bi .nav
yɛ a .active
, n'awofo nso bɛyɛ .active
. Twe beae a ɛwɔ navbar no nkyɛn no na hwɛ adesuakuw a ɛreyɛ adwuma no nsakrae.
Adeɛ 1
Eyi yɛ beae bi a ɛwɔ nsɛm a ɛwɔ scrollspy krataafa no mu. Hyɛ no nsow sɛ bere a worekɔ kratafa no ase no, wobɛtwe adwene asi navigation link a ɛfata no so. Wɔasan ayɛ no bio wɔ component nhwɛso no nyinaa mu. Yɛkɔ so de nhwɛso bi foforo bi ka ho wɔ ha de si nhoma mmobɔwee ne nea wɔasi so dua no so dua.
Asɛm 1-1
Eyi yɛ beae bi a ɛwɔ nsɛm a ɛwɔ scrollspy krataafa no mu. Hyɛ no nsow sɛ bere a worekɔ kratafa no ase no, wobɛtwe adwene asi navigation link a ɛfata no so. Wɔasan ayɛ no bio wɔ component nhwɛso no nyinaa mu. Yɛkɔ so de nhwɛso bi foforo bi ka ho wɔ ha de si nhoma mmobɔwee ne nea wɔasi so dua no so dua.
Asɛm 1-2
Eyi yɛ beae bi a ɛwɔ nsɛm a ɛwɔ scrollspy krataafa no mu. Hyɛ no nsow sɛ bere a worekɔ kratafa no ase no, wobɛtwe adwene asi navigation link a ɛfata no so. Wɔasan ayɛ no bio wɔ component nhwɛso no nyinaa mu. Yɛkɔ so de nhwɛso bi foforo bi ka ho wɔ ha de si nhoma mmobɔwee ne nea wɔasi so dua no so dua.
Adeɛ 2
Eyi yɛ beae bi a ɛwɔ nsɛm a ɛwɔ scrollspy krataafa no mu. Hyɛ no nsow sɛ bere a worekɔ kratafa no ase no, wobɛtwe adwene asi navigation link a ɛfata no so. Wɔasan ayɛ no bio wɔ component nhwɛso no nyinaa mu. Yɛkɔ so de nhwɛso bi foforo bi ka ho wɔ ha de si nhoma mmobɔwee ne nea wɔasi so dua no so dua.
Adeɛ 3
Eyi yɛ beae bi a ɛwɔ nsɛm a ɛwɔ scrollspy krataafa no mu. Hyɛ no nsow sɛ bere a worekɔ kratafa no ase no, wobɛtwe adwene asi navigation link a ɛfata no so. Wɔasan ayɛ no bio wɔ component nhwɛso no nyinaa mu. Yɛkɔ so de nhwɛso bi foforo bi ka ho wɔ ha de si nhoma mmobɔwee ne nea wɔasi so dua no so dua.
Asɛm 3-1
Eyi yɛ beae bi a ɛwɔ nsɛm a ɛwɔ scrollspy krataafa no mu. Hyɛ no nsow sɛ bere a worekɔ kratafa no ase no, wobɛtwe adwene asi navigation link a ɛfata no so. Wɔasan ayɛ no bio wɔ component nhwɛso no nyinaa mu. Yɛkɔ so de nhwɛso bi foforo bi ka ho wɔ ha de si nhoma mmobɔwee ne nea wɔasi so dua no so dua.
Asɛm 3-2
Eyi yɛ beae bi a ɛwɔ nsɛm a ɛwɔ scrollspy krataafa no mu. Hyɛ no nsow sɛ bere a worekɔ kratafa no ase no, wobɛtwe adwene asi navigation link a ɛfata no so. Wɔasan ayɛ no bio wɔ component nhwɛso no nyinaa mu. Yɛkɔ so de nhwɛso bi foforo bi ka ho wɔ ha de si nhoma mmobɔwee ne nea wɔasi so dua no so dua.
<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>
Nhwɛso a ɛne list-group
Scrollspy nso de .list-group
s yɛ adwuma. Twe beae a ɛwɔ list kuw no nkyɛn no na hwɛ adesuakuw a ɛreyɛ adwuma no nsakrae.
Adeɛ 1
Eyi yɛ beae bi a ɛwɔ nsɛm a ɛwɔ scrollspy krataafa no mu. Hyɛ no nsow sɛ bere a worekɔ kratafa no ase no, wobɛtwe adwene asi navigation link a ɛfata no so. Wɔasan ayɛ no bio wɔ component nhwɛso no nyinaa mu. Yɛkɔ so de nhwɛso bi foforo bi ka ho wɔ ha de si nhoma mmobɔwee ne nea wɔasi so dua no so dua.
Adeɛ 2
Eyi yɛ beae bi a ɛwɔ nsɛm a ɛwɔ scrollspy krataafa no mu. Hyɛ no nsow sɛ bere a worekɔ kratafa no ase no, wobɛtwe adwene asi navigation link a ɛfata no so. Wɔasan ayɛ no bio wɔ component nhwɛso no nyinaa mu. Yɛkɔ so de nhwɛso bi foforo bi ka ho wɔ ha de si nhoma mmobɔwee ne nea wɔasi so dua no so dua.
Adeɛ 3
Eyi yɛ beae bi a ɛwɔ nsɛm a ɛwɔ scrollspy krataafa no mu. Hyɛ no nsow sɛ bere a worekɔ kratafa no ase no, wobɛtwe adwene asi navigation link a ɛfata no so. Wɔasan ayɛ no bio wɔ component nhwɛso no nyinaa mu. Yɛkɔ so de nhwɛso bi foforo bi ka ho wɔ ha de si nhoma mmobɔwee ne nea wɔasi so dua no so dua.
Adeɛ 4
Eyi yɛ beae bi a ɛwɔ nsɛm a ɛwɔ scrollspy krataafa no mu. Hyɛ no nsow sɛ bere a worekɔ kratafa no ase no, wobɛtwe adwene asi navigation link a ɛfata no so. Wɔasan ayɛ no bio wɔ component nhwɛso no nyinaa mu. Yɛkɔ so de nhwɛso bi foforo bi ka ho wɔ ha de si nhoma mmobɔwee ne nea wɔasi so dua no so dua.
<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>
Sɛnea wɔde di dwuma
Via data su ahorow so
Sɛnea ɛbɛyɛ a ɛbɛyɛ mmerɛw sɛ wode scrollspy suban bɛka wo topbar navigation no ho a, fa ka data-bs-spy="scroll"
element a wopɛ sɛ wohwɛ so no ho (mpɛn pii no eyi bɛyɛ <body>
). Afei fa data-bs-target
attribute no ka ID anaa class a ɛwɔ ɔwofo element a ɛwɔ Bootstrap .nav
component biara mu no ho.
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>
Ɛdenam JavaScript so
Sɛ wode position: relative;
wo CSS no ka ho wie a, frɛ scrollspy no fa JavaScript so:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
ID botae ahorow a wobetumi asiesie a ɛho hia
Ɛsɛ sɛ Navbar link ahorow no nya id botae ahorow a wobetumi asiesie. Sɛ nhwɛso no, <a href="#home">home</a>
ɛsɛ sɛ a ne biribi a ɛwɔ DOM no mu te sɛ <div id="home"></div>
.
Wɔabu ani agu nneɛma a wɔde asi wɔn ani so a ɛnyɛ nea wotumi hu so
Wɔbɛbu wɔn ani agu target elements a ɛnhunu so na wɔrensi wɔn nav nneɛma a ɛne no hyia no so dua da.
Akwan a wɔfa so yɛ
ma ahoɔden
Sɛ wode scrollspy di dwuma de ka nneɛma a wode bɛka ho anaa woayi afi DOM no mu ho a, ɛho behia sɛ wofrɛ refresh kwan no te sɛ saa:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
tow gu
Ɔsɛe element bi scrollspy. (Eyi data a wɔde asie wɔ DOM element no so)
nyaNhwɛsode
Static kwan a ɛma wo kwan ma wo nya scrollspy nhwɛso a ɛbata DOM element bi ho
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
nyaAnaasɛKyɛNhwɛso
Static kwan a ɛma wo kwan ma wo nya scrollspy nhwɛsoɔ a ɛbata DOM element bi ho, anaasɛ wobɔ foforɔ sɛ ɛba sɛ wɔanhyɛ aseɛ a
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Nneɛma a wubetumi apaw
Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-bs-
, sɛnea ɛwɔ data-bs-offset=""
.
Din | Korɔ | Mfiaseɛ | Nkyerɛmu |
---|---|---|---|
offset |
nɔma | 10 |
Pixels to offset fi soro bere a worebu gyinabea a scroll no. |
method |
ahoma | auto |
Finds which section the spied element is in. auto bɛpaw ɔkwan a eye sen biara a wobɛfa so anya scroll coordinates. offset de ɔkwan no bedi dwuma Element.getBoundingClientRect() de anya scroll coordinates. position de HTMLElement.offsetTop ne HTMLElement.offsetLeft properties no bedi dwuma de anya scroll coordinates. |
target |
ahama | jAsɛmmisa adeɛ | DOM element a ɛwɔ hɔ | Kyerɛ element a wode bedi dwuma Scrollspy plugin. |
Nsɛm a esisi
Adeyɛ no su | Nkyerɛmu |
---|---|
activate.bs.scrollspy |
Saa adeyɛ yi tow wɔ nhoma mmobɔwee element no so bere biara a ade foforo bi bɛyɛ adwuma denam nhoma mmobɔwee no so. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})