Agbalẽxatsaxatsa

Trɔ asi le Bootstrap ƒe mɔfiame ŋu le ɖokuiwò si alo ŋlɔ ƒuƒoƒo ƒe akpawo ɖe agbalẽxatsaxatsa ƒe nɔƒe dzi be nàfia kadodo si le dɔ wɔm fifia le nukpɔkpɔƒea.

Le axa sia dzi

Ale si wòwɔa dɔe

Scrollspy trɔa .activeklass la ɖe anchor ( <a>) elements dzi ne element si idŋu anchor la ƒe nufiame le hrefla ʋuʋu ɖe view me. Scrollspy zazã nyuie wu kpe ɖe Bootstrap nav component alo list group , gake awɔ dɔ kple anchor element ɖesiaɖe hã le axa si li fifia dzi. Ale si wòwɔa dɔe nye esi.

Be nàdze egɔme la, scrollspy bia nu eve: mɔfiame, xexlẽdzesiwo ƒe ƒuƒoƒo, alo kadodo bɔbɔe aɖe, kpakple nugoe si woate ŋu aʋuʋu. Nusi woateŋu aʋuʋu ateŋu anye <body>alo nusi wowɔ ɖe ɖoɖo nu kple ƒuƒoƒo heightkple overflow-y: scroll.
Le nugoe si woate ŋu aʋu la dzi la, tsɔe kpe ɖe eŋu data-bs-spy="scroll"eye data-bs-target="#navId"afi si navIdwòle etɔxɛ idle mɔfiame si do ƒome kplii la me. Kpɔ egbɔ be yede a hã eme tabindex="0"be yeakpɔ egbɔ be yekpɔ keyboard la.
Ne èle nugoe si nye “spied” la ʋum la, wotsɔa .activeklass aɖe kpena ɖe eŋu eye woɖenɛ ɖa le seke ƒe kadodo siwo le mɔfiame si do ƒome kplii la me. Ele be taɖodzinu siwo gbɔ woate ŋu akpɔ gbɔ nanɔ kadodowo me id, ne menye nenema o la, woŋea aɖaba ƒua wo dzi. Le kpɔɖeŋu me, ele be a <a href="#home">home</a>nasɔ kple nane le DOM la me abe<div id="home"></div>
Woaŋe aɖaba aƒu taɖodzinu ƒe akpa siwo womekpɔna o dzi. Kpɔ Non-visible elements ƒe akpa si le ete.

Kpɔɖeŋuwo

Ʋu teƒe si le navbar la te eye nàkpɔ klass si le dɔ wɔm ƒe tɔtrɔ. Ʋu nusiwo le fli dzi eye nàkpɔ nusiwo le fli dzi hã woadze ƒã.

Tanya gbãtɔ

Esia nye teƒe aɖewo ƒe nyawo na scrollspy ƒe axaa. De dzesii be ne èle axaa dzi yim la, mɔfianu si sɔ la adze. Wogbugbɔe gblɔna le akpaa ƒe kpɔɖeŋu bliboa me. Míeyia edzi tsɔa kpɔɖeŋu ƒe kɔpi bubu aɖewo kpena ɖe eŋu le afisia be míate gbe ɖe agbalẽxatsaxatsa kple nuŋɔŋlɔa dzi.

Tanya evelia

Tanya etɔ̃lia

Tanya enelia

Tanya atɔ̃lia

<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 hã wɔa dɔ kple nested .navs. Ne nested .navnye la .active, edzilawo hã anye .active. Ʋu teƒe si le navbar la xa eye nàkpɔ klass si le dɔ wɔm ƒe tɔtrɔ.

Nyati 1 lia

Nenɔ susu me na wò be JavaScript ƒe kpeɖeŋutɔa dzea agbagba be yeatia nusi sɔ le nusiwo katã ate ŋu adze la dome. Scrollspy taɖodzinu geɖe siwo woate ŋu akpɔ le ɣeyiɣi ɖeka me ate ŋu ahe nya aɖewo vɛ.

Nyati 1-1 lia

Nyati 1-2 lia

Nyati 2 lia

Nyati 3 lia

Nyati 3-1 lia

Nyati 3-2 lia

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

Ŋlɔ ƒuƒoƒoa ɖi

Scrollspy hã wɔa dɔ kple .list-groups. Ʋu teƒe si le xexlẽdzesiwo ƒe ƒuƒoƒoa xa eye nàkpɔ klass si le dɔ wɔm ƒe tɔtrɔ.

Nyati 1 lia Nyati 2 lia Nyati 3 lia Nyati 4 lia

Nyati 1 lia

Nyati 2 lia

Nyati 3 lia

Nyati 4 lia

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

Seke bɔbɔewo

Menye nav ƒe akpawo kple xexlẽdzesi ƒuƒoƒowo koe Scrollspy nye o, eyata awɔ dɔ le <a>anchor ƒe akpa ɖesiaɖe ŋu le nuŋlɔɖi si li fifia me. Ʋu teƒea eye nàkpɔ .activeklass la ƒe tɔtrɔ.

Nyati 1 lia Nyati 2 lia Nyati 3 lia Nyati 4 lia Nyati 5 lia

Nyati 1 lia

Nyati 2 lia

Nyati 3 lia

Nyati 4 lia

Nyati 5 lia

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

Nusiwo womekpɔna o

Woaŋe aɖaba aƒu taɖodzinu ƒe akpa siwo womekpɔna o dzi eye woƒe nav nu siwo sɔ kplii maxɔ .activeklass o. Scrollspy ƒe kpɔɖeŋu siwo wodze egɔme le agbalẽ xatsaxatsa si womekpɔna o me aŋe aɖaba aƒu taɖodzinu ƒe akpawo katã dzi. Zã refreshmɔnua nàtsɔ alé ŋku ɖe nusiwo woate ŋu akpɔ ŋu nenye be agbalẽ xatsaxatsaa nya dze ƒã ko.

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

Zãzã

To nyatakaka ƒe nɔnɔmewo dzi

Be nàtsɔ scrollspy nuwɔna akpe ɖe wò topbar ƒe mɔfiame ŋu bɔbɔe la, tsɔ kpe data-bs-spy="scroll"ɖe nusi nèdi be yeatsa ŋku ŋu (zi geɖe la, esia anye <body>). Emegbe nàtsɔ data-bs-targetnɔnɔme si idme Bootstrap ƒe akpa ɖesiaɖe ƒe dzila ƒe akpa ƒe alo klass ŋkɔ le la akpe ɖe eŋu .nav.

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

To JavaScript dzi

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

Tiatiawɔblɔɖewo

Esi woateŋu atsɔ tiatiawɔnuwo ato nyatakaka nɔnɔmewo alo JavaScript dzi ta la, àteŋu atsɔ tiatia ŋkɔ akpe ɖe data-bs-, abe alesi wòle le data-bs-animation="{value}". Kpɔ egbɔ be yetrɔ tiatia ŋkɔa ƒe case type tso “ camelCase ” yi “ kebab-case ” ne èle tiatiaawo tom to data attributes dzi. Le kpɔɖeŋu me, zãe data-bs-custom-class="beautifier"ɖe data-bs-customClass="beautifier".

Tso Bootstrap 5.2.0 dzi la, akpaawo katã doa alɔ dodokpɔ ƒe nyatakaka si wodzra ɖo ƒe nɔnɔme data-bs-configsi ateŋu axɔ akpa ƒe ɖoɖo bɔbɔe abe JSON ka ene. Ne element aɖe si data-bs-config='{"delay":0, "title":123}'kple data-bs-title="456"nɔnɔmewo le la, asixɔxɔ mamlɛtɔ titleanye 456eye nyatakaka nɔnɔme vovovoawo axɔ asixɔxɔ siwo wona le data-bs-config. Tsɔ kpe ɖe eŋu la, nyatakaka ƒe nɔnɔme siwo li fifia te ŋu tsɔa JSON ƒe asixɔxɔwo abe data-bs-delay='{"show":0,"hide":150}'.

Ŋkɔ	Ƒomevi	Gᴐmedzeƒe	Nuɖᴐɖᴐ
`rootMargin`	ka	`0px 0px -25%`	Intersection Observer rootMargin units siwo sɔ, ne wole akɔnta bum agbalẽxatsaxatsa ƒe nɔƒe.
`smoothScroll`	boolean ƒe ƒuƒoƒo	`false`	Enaa ʋuʋu nyuie ne zãla aɖe te kadodo aɖe si ku ɖe ScrollSpy ƒe ŋkuléleɖenuŋuwo ŋu.
`target`	ka, DOM ƒe akpa aɖe	`null`	Tsɔ element si woatsɔ awɔ Scrollspy ƒe kpeɖeŋutɔ ŋudɔ.
`threshold`	ƒuƒoƒo ƒe ƒuƒoƒo	`[0.1, 0.5, 1]`	`IntersectionObserver` threshold valid input, ne wole akɔnta bum agbalẽxatsaxatsa ƒe nɔƒe.

Tiatia Siwo Womezãna O

Vaseɖe v5.1.3 la míenɔ offset& methodtiatiawɔnuwo zãm, siwo fifia womegazãna o eye wotsɔ rootMargin. Be míalé megbenyawo ƒe ɖekawɔwɔ me ɖe asi la, míayi edzi anɔ nusi wona offsetme la me dzrom rootMargin, gake woaɖe nɔnɔme sia ɖa le v6 me.

Mɔnuwo

Nuwɔmɔnu	Nuɖᴐɖᴐ
`dispose`	Tsrɔ̃a element aɖe ƒe scrollspy. (Eɖea nyatakaka siwo wodzra ɖo ɖe DOM ƒe akpaa dzi ɖa)
`getInstance`	Static mɔnu be woaxɔ scrollspy ƒe kpɔɖeŋu si do ƒome kple DOM ƒe akpa aɖe.
`getOrCreateInstance`	Static mɔnu be woaxɔ scrollspy ƒe kpɔɖeŋu si do ƒome kple DOM element, alo be woawɔ yeye nenye be womedze egɔme o.
`refresh`	Ne èle nusiwo le DOM me kpem ɖe eŋu alo le eɖem ɖa la, ahiã be nàyɔ gbugbɔgawɔ ƒe mɔnu.

Kpɔɖeŋu aɖe si zãa gbugbɔgaɖoanyi ƒe mɔnu lae nye esi:

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

Nudzɔdzɔwo

Nudzᴐdzᴐ	Nuɖᴐɖᴐ
`activate.bs.scrollspy`	Nudzɔdzɔ sia doa dzo ɖe agbalẽxatsaxatsa ƒe akpaa dzi ɣesiaɣi si agbalẽxatsaxatsa la wɔ seke aɖe.

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

Agbalẽxatsaxatsa

Ale si wòwɔa dɔe

Kpɔɖeŋuwo

Navbar ƒe ŋkɔ

Tanya gbãtɔ

Tanya evelia

Tanya etɔ̃lia

Tanya enelia

Tanya atɔ̃lia

Nested nav

Nyati 1 lia

Nyati 1-1 lia

Nyati 1-2 lia

Nyati 2 lia

Nyati 3 lia

Nyati 3-1 lia

Nyati 3-2 lia

Ŋlɔ ƒuƒoƒoa ɖi

Nyati 1 lia

Nyati 2 lia

Nyati 3 lia

Nyati 4 lia

Seke bɔbɔewo

Nyati 1 lia

Nyati 2 lia

Nyati 3 lia

Nyati 4 lia

Nyati 5 lia

Nusiwo womekpɔna o

Zãzã

To nyatakaka ƒe nɔnɔmewo dzi

To JavaScript dzi

Tiatiawɔblɔɖewo

Mɔnuwo

Nudzɔdzɔwo