Scrollspy

Buyekeza ngokuzenzakalela ukuzulazula kwe-Bootstrap noma uhlu lwezingxenye zeqembu ngokusekelwe endaweni yokuskrola ukuze ubonise ukuthi yisiphi isixhumanisi esisebenzayo okwamanje endaweni yokubuka.

Kuleli khasi

Isebenza kanjani

I-Scrollspy iguqula .activeikilasi kuma-elementi okuhangelwe ( <a>) uma i-elementi enereferensi ekhonjwe ihange isskrolwa idukuze ibonakale href. I-Scrollspy isetshenziswa kangcono kakhulu ngokuhambisana nengxenye ye-Bootstrap nav noma uhlu lweqembu , kodwa futhi izosebenza nanoma yiziphi izici zehange ekhasini lamanje. Nansi indlela esebenza ngayo.

Ukuqala, i-scrollspy idinga izinto ezimbili: ukuzulazula, uhlu lweqembu, noma isethi elula yezixhumanisi, kanye nesiqukathi esiskroleka. Isiqukathi esiskroleka singaba into <body>noma into yangokwezifiso enesethi heightkanye overflow-y: scroll.
Kusiqukathi esiskroleka, engeza data-bs-spy="scroll"nokuthi data-bs-target="#navId"ikuphi navIdokuhlukile idkokuzulazula okuhlobene. Qiniseka ukuthi ufaka futhi u-a tabindex="0"ukuze uqinisekise ukufinyelela kwekhibhodi.
Njengoba uskrola isiqukathi "esihloliwe", .activeisigaba siyengezwa futhi sikhishwe kuzixhumanisi zokunamathisela phakathi kokuzulazula okuhlobene. Izixhumanisi kufanele zibe idnezinhloso ezingaxazululeka, ngaphandle kwalokho azinakwa. Isibonelo, <a href="#home">home</a>okumele kuhambisane nokuthile okuku-DOM njengokufana<div id="home"></div>
Izinto eziqondiwe ezingabonakali zizozitshwa. Bona isigaba sezinto ezingabonakali ngezansi.

Izibonelo

Skrola indawo engezansi kwe-navbar bese ubuka ukuguquka kwekilasi elisebenzayo. Vula imenyu yokudonsela phansi futhi ubuke nezinto ezidonsela phansi zigqanyiswe futhi.

Isihloko sokuqala

Lokhu okunye okuqukethwe kwesibambi sekhasi le-scrollspy. Qaphela ukuthi njengoba uskrolela phansi kwekhasi, isixhumanisi sokuzulazula esifanele siyagqanyiswa. Kuphindwa kuso sonke isibonelo sengxenye. Silokhu sengeza ikhophi eyengeziwe yesibonelo lapha ukuze sigcizelele ukuskrola nokugqamisa.

Isihloko sesibili

Isihloko sesithathu

Isihloko sesine

Isihloko sesihlanu

<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>

I-nav eyisidleke

I-Scrollspy iphinde isebenze ne-nested .navs. Uma kunesidleke .nav, .activeabazali bayo nabo bazoba .active. Skrola indawo eduze kwe-navbar bese ubuka ukuguquka kwekilasi elisebenzayo.

Into 1

Khumbula ukuthi i-plugin ye-JavaScript izama ukukhetha into efanele phakathi kwakho konke okungase kubonakale. Amathagethi amaningi okuskrola abonakalayo ngesikhathi esisodwa angabangela izinkinga ezithile.

Into 1-1

Iphuzu 1-2

Into 2

Into yesi-3

Into 3-1

Iphuzu 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>

Iqembu lohlu

I-Scrollspy iphinde isebenze no- .list-groups. Skrola indawo eseduze neqembu lohlu bese ubuka ukuguquka kwekilasi elisebenzayo.

Into 1 Into 2 Into yesi-3 Iphuzu 4

Into 1

Into 2

Into yesi-3

Iphuzu 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>

Amahange alula

I-Scrollspy ayikhawulelwe ezingxenyeni ze-nav namaqembu ohlu, ngakho izosebenza kunoma yiziphi <a>izici zehange kudokhumenti yamanje. Skrola indawo bese ubuka .activeikilasi lishintsha.

Into 1 Into 2 Into yesi-3 Iphuzu 4 Into 5

Into 1

Into 2

Into yesi-3

Iphuzu 4

Into 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>

Izakhi ezingabonakali

Izinto eziqondiwe ezingabonakali zizozitshwa futhi izinto zazo ezihambisanayo ngeke zithole .activeisigaba. Izehlakalo ze-Scrollspy eziqaliswe kusisonga esingabonakali zizoziba zonke izici eziqondiwe. Sebenzisa refreshindlela ukuze uhlole izinto ezibonakalayo lapho i-wrapper ibonakala.

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()
  })
})

Ukusetshenziswa

Ngezibaluli zedatha

Ukwengeza kalula impatho ye-scrollspy ekuzulazuleni kwe data-bs-spy="scroll"-topbar yakho, engeza entweni ofuna ukuyihlola (imvamisa lokhu kuzoba yi- <body>). Bese wengeza data-bs-targetisibaluli ngegama idnoma lekilasi lesici esingumzali sanoma iyiphi .navingxenye ye-Bootstrap.

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Nge-JavaScript

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

Izinketho

Njengoba izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript, ungakwazi ukwengeza igama lenketho kokuthi data-bs-, njengaku data-bs-animation="{value}". Qiniseka ukuthi ushintsha uhlobo lwekesi legama lenketho lisuka ku- “ camelCase ” liye ku- “ kebab-case ” lapho udlulisa izinketho ngezibaluli zedatha. Isibonelo, sebenzisa data-bs-custom-class="beautifier"esikhundleni se- data-bs-customClass="beautifier".

Kusukela ku-Bootstrap 5.2.0, zonke izingxenye zisekela isibaluli sedatha egodliwe esihlolwayodata-bs-config esingafaka ukucushwa kwengxenye elula njengochungechunge lwe-JSON. Uma into inezibaluli , inani lokugcina lizoba data-bs-config='{"delay":0, "title":123}'futhi izibaluli zedatha ezihlukene zizokhipha amanani anikezwe ngomhla ka- . Ngaphezu kwalokho, izibaluli zedatha ezikhona ziyakwazi ukubeka amanani e-JSON afana .data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Igama	Uhlobo	Okuzenzakalelayo	Incazelo
`rootMargin`	umucu	`0px 0px -25%`	I -Intersection Observer rootMargin amayunithi avumelekile, lapho kubalwa indawo yokuskrola.
`smoothScroll`	boolean	`false`	Inika amandla ukuskrola okushelelayo lapho umsebenzisi achofoza isixhumanisi esibhekisele kokubonwayo kwe-ScrollSpy.
`target`	iyunithi yezinhlamvu, isici se-DOM	`null`	Icacisa into ezosetshenziswa i-plugin ye-Scrollspy.
`threshold`	uhlu	`[0.1, 0.5, 1]`	`IntersectionObserver` okokufaka okuvumelekile kwe- threshold , lapho kubalwa indawo yokuskrola.

Izinketho Ezihoxisiwe

Kuze kube yi-v5.1.3 besiyisebenzisa offset& methodnezinketho, manje esezihoxisiwe futhi zathathelwa indawo rootMargin. Ukuze sigcine ukusebenzisana emuva, sizoqhubeka nokuhlaziya okunikezwe offsetku- rootMargin, kodwa lesi sici sizosuswa ku- v6 .

Izindlela

Indlela	Incazelo
`dispose`	Icekela phansi i-scrollspy yento. (Isusa idatha egciniwe kusici se-DOM)
`getInstance`	Indlela emile yokuthola isenzakalo sokuskrola esihlotshaniswa nento ye-DOM.
`getOrCreateInstance`	Static method to get the scrollspy instance associated with a DOM element, or to create a new one in case it wasn’t initialized.
`refresh`	When adding or removing elements in the DOM, you’ll need to call the refresh method.

Here’s an example using the refresh method:

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

Events

Event	Description
`activate.bs.scrollspy`	This event fires on the scroll element whenever an anchor is activated by the scrollspy.

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

Scrollspy

Isebenza kanjani

Izibonelo

Ibha ye-Navbar

Isihloko sokuqala

Isihloko sesibili

Isihloko sesithathu

Isihloko sesine

Isihloko sesihlanu

I-nav eyisidleke

Into 1

Into 1-1

Iphuzu 1-2

Into 2

Into yesi-3

Into 3-1

Iphuzu 3-2

Iqembu lohlu

Into 1

Into 2

Into yesi-3

Iphuzu 4

Amahange alula

Into 1

Into 2

Into yesi-3

Iphuzu 4

Into 5

Izakhi ezingabonakali

Ukusetshenziswa

Ngezibaluli zedatha

Nge-JavaScript

Izinketho

Izindlela

Events