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.

Wɔ kratafa yi so

Sɛnea ɛyɛ adwuma

Scrollspy toggles .activeclass no wɔ anchor ( <a>) elements so bere a element a ɛwɔ idreferenced by anchor's hrefno scrolled kɔ view. Scrollspy yɛ papa sɛ wode bedi dwuma de aka Bootstrap nav component anaa list group ho , nanso ɛne anchor elements biara a ɛwɔ krataafa a ɛwɔ hɔ mprempren no nso bɛyɛ adwuma. Sɛnea ɛyɛ adwuma ni.

Sɛ wopɛ sɛ wufi ase a, scrollspy hwehwɛ nneɛma abien: akwantu, list kuw, anaa link ahorow a ɛnyɛ den, ne ade a wotumi twetwe. Nneɛma a wotumi scrollable no betumi ayɛ <body>anaasɛ custom element a ɛwɔ set heightne overflow-y: scroll.
Wɔ scrollable container no so no, fa ka ho data-bs-spy="scroll"na data-bs-target="#navId"baabi navIda ɛyɛ soronko idwɔ navigation a ɛbata ho no mu. Hwɛ hu sɛ wode a nso bɛka ho na tabindex="0"ama woahwɛ ahu sɛ wobɛkɔ keyboard so.
Bere a worekɔ “spied” container no so no, wɔde .activeadesuakuw bi bɛka ho na woyi fi anchor link ahorow a ɛwɔ navigation a ɛbata ho no mu. Ɛsɛ sɛ link ahorow no nya idbotae ahorow a wotumi siesie, anyɛ saa a wobu ani gu so. Sɛ nhwɛso no, <a href="#home">home</a>ɛsɛ sɛ a ɛne biribi a ɛwɔ DOM no mu te sɛ no hyia<div id="home"></div>
Wobebu ani agu target elements a wonhu so. Hwɛ Non-visible elements ɔfã a ɛwɔ ase hɔ no.

Nhwɛso ahorow

Twe beae a ɛwɔ navbar no ase no na hwɛ adesuakuw a ɛreyɛ adwuma no nsakrae. Bue dropdown menu no na hwɛ sɛ nneɛma a ɛwɔ dropdown no nso bɛtwe adwene asi so.

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

Asɛmti a ɛto so abiɛsa

Asɛmti a ɛto so anan

Asɛmti a ɛto so anum

<nav id="navbar-example2" class="navbar bg-light px-3 mb-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-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2" 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>

Nested nav

Scrollspy nso ne nested .navs yɛ adwuma. Sɛ nested bi .navyɛ 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

Ma ɛntra w’adwenem sɛ JavaScript plugin no bɔ mmɔden sɛ ɛbɛpaw element a ɛfata wɔ nea ebia wobetumi ahu nyinaa mu. Scrollspy botae ahorow pii a wotumi hu bere koro mu no betumi de nsɛm bi aba.

Asɛm 1-1

Asɛm 1-2

Adeɛ 2

Adeɛ 3

Asɛm 3-1

Asɛm 3-2

<div class="row">
  <div class="col-4">
    <nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
      <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>

  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
      <div id="item-1">
        <h4>Item 1</h4>
        <p>...</p>
      </div>
      <div id="item-1-1">
        <h5>Item 1-1</h5>
        <p>...</p>
      </div>
      <div id="item-1-2">
        <h5>Item 1-2</h5>
        <p>...</p>
      </div>
      <div id="item-2">
        <h4>Item 2</h4>
        <p>...</p>
      </div>
      <div id="item-3">
        <h4>Item 3</h4>
        <p>...</p>
      </div>
      <div id="item-3-1">
        <h5>Item 3-1</h5>
        <p>...</p>
      </div>
      <div id="item-3-2">
        <h5>Item 3-2</h5>
        <p>...</p>
      </div>
    </div>
  </div>
</div>

Kyerɛw kuw no din

Scrollspy nso de .list-groups yɛ adwuma. Twe beae a ɛwɔ list kuw no nkyɛn no na hwɛ adesuakuw a ɛreyɛ adwuma no nsakrae.

Adeɛ 1 Adeɛ 2 Adeɛ 3 Adeɛ 4

Adeɛ 1

Adeɛ 2

Adeɛ 3

Adeɛ 4

<div class="row">
  <div class="col-4">
    <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>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" 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>
  </div>
</div>

Ankora a ɛnyɛ den

Scrollspy nyɛ nav components ne list groups nko ara, enti ɛbɛyɛ adwuma wɔ <a>anchor elements biara a ɛwɔ mprempren krataa no mu. Twe beae no na hwɛ sɛnea .activeadesuakuw no sesa.

Adeɛ 1 Adeɛ 2 Adeɛ 3 Adeɛ 4 Asɛm a ɛto so 5

Adeɛ 1

Adeɛ 2

Adeɛ 3

Adeɛ 4

Asɛm a ɛto so 5

<div class="row">
  <div class="col-4">
    <div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
      <a class="p-1 rounded" href="#simple-list-item-1">Item 1</a>
      <a class="p-1 rounded" href="#simple-list-item-2">Item 2</a>
      <a class="p-1 rounded" href="#simple-list-item-3">Item 3</a>
      <a class="p-1 rounded" href="#simple-list-item-4">Item 4</a>
      <a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
    </div>
  </div>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
      <h4 id="simple-list-item-1">Item 1</h4>
      <p>...</p>
      <h4 id="simple-list-item-2">Item 2</h4>
      <p>...</p>
      <h4 id="simple-list-item-3">Item 3</h4>
      <p>...</p>
      <h4 id="simple-list-item-4">Item 4</h4>
      <p>...</p>
      <h4 id="simple-list-item-5">Item 5</h4>
      <p>...</p>
    </div>
  </div>
</div>

Nneɛma a ɛnyɛ nea wotumi hu

Wɔbɛbu ani agu target elements a ɛnhunu so na wɔn nav nneɛma a ɛne no hyia no rennya .activeclass. Scrollspy nhwɛsoɔ a wɔahyɛ aseɛ wɔ wrapper a ɛnhunu mu no bɛbu ani agu target elements nyinaa so. Fa refreshɔkwan no hwɛ sɛ nneɛma bi wɔ hɔ a wotumi hu bere a wɔahu wrapper no awie no.

document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
  el.addEventListener('shown.bs.tab', () => {
    const target = el.getAttribute('data-bs-target')
    const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
    bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
  })
})

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-targetattribute a ɛwɔ idanaa class din a ɛwɔ ɔwofoɔ element a ɛwɔ Bootstrap .navcomponent biara mu no ka ho.

<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

const scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

Nneɛma a wubetumi apaw

Sɛnea wobetumi afa data attributes anaa JavaScript so de options no atwam no, wubetumi de option din ahyɛ data-bs-, sɛnea ɛwɔ data-bs-animation="{value}". Hwɛ hu sɛ wobɛsesa case type a ɛwɔ option din no mu afi “ camelCase ” akɔ “ kebab-case ” bere a wode options no nam data attributes so retwam no. Sɛ nhwɛso no, fa di dwuma data-bs-custom-class="beautifier"mmom sen sɛ wode data-bs-customClass="beautifier".

Ɛde besi Bootstrap 5.2.0 no, nneɛma no nyinaa boa nhwehwɛmu a wɔde asie data su data-bs-configa ebetumi de afã nhyehyɛe a ɛnyɛ den ahyɛ mu sɛ JSON ahama. Sɛ element bi wɔ data-bs-config='{"delay":0, "title":123}'ne data-bs-title="456"su ahorow a, botae a etwa to titleno bɛyɛ 456na data su ahorow a ɛtetew mu no bɛbɔ botae ahorow a wɔde ama wɔ data-bs-config. Bio nso, data su ahorow a ɛwɔ hɔ dedaw no tumi de JSON botae ahorow te sɛ data-bs-delay='{"show":0,"hide":150}'.

Din	Korɔ	Mfiaseɛ	Nkyerɛmu
`rootMargin`	ahoma	`0px 0px -25%`	Intersection Observer rootMargin units a ɛfata, bere a worebu scroll gyinabea ho akontaa.
`smoothScroll`	boolean ho asɛm	`false`	Ɛma scrolling yɛ mmerɛw bere a obi a ɔde di dwuma no klik link bi a ɛkyerɛ ScrollSpy observables so no.
`target`	ahama, DOM element	`null`	Kyerɛ element a wode bedi dwuma Scrollspy plugin.
`threshold`	array a ɛwɔ hɔ	`[0.1, 0.5, 1]`	`IntersectionObserver` threshold valid input, bere a worebu scroll gyinabea ho akontaa.

Nneɛma a Wɔpaw a Wɔagyae

Ɛde besi v5.1.3 no na yɛde offset& methodoptions redi dwuma, a mprempren wɔagyae na wɔde rootMargin. Sɛnea ɛbɛyɛ a yɛbɛkɔ so ayɛ nea ɛne ne ho hyia no, yɛbɛkɔ so ayɛ nhwehwɛmu wɔ given offsetto bi mu rootMargin, nanso wobeyi saa ade yi afi hɔ wɔ v6 mu.

Akwan a wɔfa so yɛ

Ɔkwan	Nkyerɛmu
`dispose`	Ɔsɛe element bi scrollspy. (Eyi data a wɔde asie wɔ DOM element no so)
`getInstance`	Static kwan a wɔfa so nya scrollspy nhwɛso a ɛbata DOM element bi ho.
`getOrCreateInstance`	Static kwan a wobɛfa so anya scrollspy nhwɛsoɔ a ɛbata DOM element bi ho, anaasɛ wobɛbɔ foforɔ sɛ ɛba sɛ wɔanhyɛ aseɛ a.
`refresh`	Sɛ wode elements rebɛka ho anaa woreyi afi DOM no mu a, ɛho behia sɛ wofrɛ refresh kwan no.

Nhwɛso bi a wɔde refresh kwan no di dwuma ni:

const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
dataSpyList.forEach(dataSpyEl => {
  bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
})

Nsɛm a esisi

Dwumadie	Nkyerɛmu
`activate.bs.scrollspy`	Saa adeyɛ yi tow wɔ nhoma mmobɔwee element no so bere biara a nhoma mmobɔwee no bɛma ankora bi ayɛ adwuma.

const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
  // do something...
})

Nwoma mmobɔwee

Sɛnea ɛyɛ adwuma

Nhwɛso ahorow

Navbar na ɛwɔ hɔ

Asɛmti a edi kan

Asɛmti a ɛto so abien

Asɛmti a ɛto so abiɛsa

Asɛmti a ɛto so anan

Asɛmti a ɛto so anum

Nested nav

Adeɛ 1

Asɛm 1-1

Asɛm 1-2

Adeɛ 2

Adeɛ 3

Asɛm 3-1

Asɛm 3-2

Kyerɛw kuw no din

Adeɛ 1

Adeɛ 2

Adeɛ 3

Adeɛ 4

Ankora a ɛnyɛ den

Adeɛ 1

Adeɛ 2

Adeɛ 3

Adeɛ 4

Asɛm a ɛto so 5

Nneɛma a ɛnyɛ nea wotumi hu

Sɛnea wɔde di dwuma

Via data su ahorow so

Ɛdenam JavaScript so

Nneɛma a wubetumi apaw

Akwan a wɔfa so yɛ

Nsɛm a esisi