Scrollspy ya go phuthwa

Mpshafatša ka go iketla go sepelasepela ga Bootstrap goba dikarolo tša sehlopha sa lenaneo go ya ka maemo a go sepelasepela go laetša gore ke kgokagano efe yeo e šomago gabjale ka go lefelo la go lebelela.

Letlakaleng le

Kamoo e šomago ka gona

Scrollspy e fetola .activesehlopha godimo ga dielemente tša ankora ( <a>) ge elemente yeo e nago le yeo e idšupeditšwego ke ya ankora hrefe kgokološwa go ya ponong. Scrollspy e šomišwa gabotse ka kopanelo le karolo ya nav ya Bootstrap goba sehlopha sa lenaneo , eupša e tla šoma gape le dielemente dife goba dife tša ankora letlakaleng la bjale. Ke kamoo e šomago ka gona.

Go thoma, scrollspy e nyaka dilo tše pedi: go sepelasepela, sehlopha sa lenaneo, goba sete ye bonolo ya dikgokagano, gotee le setshelo seo se ka kgokološwago. Setshelo seo se ka kgokološwago e ka ba <body>goba elemente ya tlwaelo yeo e nago le sete heightle overflow-y: scroll.
Go setshelo seo se ka kgokološwago, oketša data-bs-spy="scroll"le gore ke data-bs-target="#navId"kae mo navIdgo kgethegilego idga go sepelasepela mo go sepedišanago le wona. Kgonthiša gore o akaretša gape le tabindex="0"go netefatša phihlelelo ya khiiboto.
Ge o dutše o sepelasepela setshelo sa “go hlola”, .activesehlopha se a okeletšwa le go tlošwa go tšwa go dikgokagano tša ankora ka gare ga go sepelasepela mo go sepedišanago le yona. Dikgokagano di swanetše go ba le iddiphetho tšeo di ka rarollwago, go sego bjalo di a hlokomologwa. Mohlala, a e <a href="#home">home</a>swanetše go sepelelana le selo se sengwe ka go DOM go swana le<div id="home"></div>
Dielemente tša nepišo tšeo di sa bonagalego di tla hlokomologwa. Bona karolo ya Dielemente tše di sa bonagalego ka fase.

Mehlala

Scroll lefelo ka fase ga navbar gomme o lebelele phetogo ya sehlopha se se šomago. Bula thepo ya go theoga gomme o lebelele dilo tša go theoga di hlaolwa gape.

Hlogo ya mathomo

Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.

Hlogo ya bobedi

Hlogo ya boraro

Hlogo ya bone

Hlogo ya bohlano

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

Nav e tsentšwego ka gare ga sehlaga

Scrollspy e šoma gape ka .navs yeo e tsentšwego ka gare ga sehlaga. Ge e ba nested .nave le .active, batswadi ba yona le bona ba tla ba .active. Scroll lefelo kgauswi le navbar gomme o lebelele phetogo ya sehlopha se se šomago.

Ntlha 1.

Dula o gopola gore polaka ya JavaScript e leka go kgetha elemente ye e nepagetšego gare ga tšohle tšeo di ka bonagalago. Diphetho tše dintši tše di bonagalago tša scrollspy ka nako e tee di ka baka ditaba tše dingwe.

Ntlha ya 1-1

Ntlha ya 1-2

Ntlha ya 2.

Ntlha ya 3

Ntlha ya 3-1

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

Lenaneo sehlopha

Scrollspy e šoma gape ka .list-groups. Scroll lefelo kgauswi le sehlopha sa lenaneo gomme o lebelele phetogo ya klase ye e šomago.

Ntlha 1. Ntlha ya 2. Ntlha ya 3 Ntlha ya 4.

Ntlha 1.

Ntlha ya 2.

Ntlha ya 3

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

Ditshetledi tše bonolo

Scrollspy ga e lekanyetšwe go dikarolo tša nav le dihlopha tša lenaneo, ka fao e tla šoma go <a>dielemente dife goba dife tša ankora ka go tokomane ya bjale. Scroll lefelo gomme o lebelele .activephetogo ya klase.

Ntlha 1. Ntlha ya 2. Ntlha ya 3 Ntlha ya 4. Ntlha ya 5.

Ntlha 1.

Ntlha ya 2.

Ntlha ya 3

Ntlha ya 4.

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

Dielemente tšeo di sa bonagalego

Dielemente tša nepišo tšeo di sa bonagalego di tla hlokomologwa gomme dilo tša tšona tša nav tše di sepelelanago di ka se amogele .activesehlopha. Ditiragalo tša Scrollspy tšeo di thomilwego ka gare ga sephuthelwana seo se sa bonagalego di tla hlokomologa dielemente ka moka tša nepišo. Šomiša refreshmokgwa go lekola dielemente tše di bonwago ge sephuthelwana se šetše se bonagala.

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

Tšhomišo

Ka dika ya data

Go oketša gabonolo boitshwaro bja scrollspy go go sepelasepela ga gago ga topbar, oketša data-bs-spy="scroll"go elemente yeo o nyakago go e hlola (ka tlwaelo kudu se e be e tla ba <body>). Ke moka o tlaleletše data-bs-targetseka ka idgoba leina la sehlopha sa elemente ya motswadi ya karolo efe goba efe ya Bootstrap .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>

Ka JavaScript

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

Dikgetho

Bjalo ka ge dikgetho di ka fetišwa ka dika tša datha goba JavaScript, o ka tlaleletša leina la kgetho go data-bs-, bjalo ka go data-bs-animation="{value}". Kgonthiša gore o fetoša mohuta wa molato wa leina la kgetho go tšwa go “ camelCase ” go ya go “ kebab-case ” ge o fetiša dikgetho ka dika tša datha. Ka mohlala, diriša data-bs-custom-class="beautifier"go e na le data-bs-customClass="beautifier".

Go tloga go Bootstrap 5.2.0, dikarolo ka moka di thekga seka sa datha ye e bolokilwego ya tekodata-bs-config yeo e ka beago peakanyo ya karolo ye bonolo bjalo ka thapo ya JSON. Ge elemente e na data-bs-config='{"delay":0, "title":123}'le le data-bs-title="456"dika, boleng bja mafelelo titlee tla ba 456gomme dika tša datha tše di aroganego di tla phaela ka thoko boleng bjo bo filwego go data-bs-config. Go tlaleletša, dika tša datha tše di lego gona di kgona go bea dikelo tša JSON go swana le data-bs-delay='{"show":0,"hide":150}'.

Leina	Mohuta	Hlokomologa	Tlhalošo
`rootMargin`	thapo	`0px 0px -25%`	Intersection Observer rootMargin diyuniti tše di šomago, ge o bala boemo bja go kgokološa.
`smoothScroll`	boolean ya go swana	`false`	E kgontšha go sepelasepela ka boreledi ge modiriši a kgotla kgokagano yeo e šupago go dilo tše di bonwago tša ScrollSpy.
`target`	thapo, elemente ya DOM	`null`	E laetša elemente ya go diriša polaka ya Scrollspy.
`threshold`	hlophisitsoeng	`[0.1, 0.5, 1]`	`IntersectionObserver` moedi input e nepahetseng, ha ho bala boemo ba moqolo.

Dikgetho tšeo di sa dirišwego

Go fihla go v5.1.3 re be re diriša offset& methoddikgetho, tšeo bjale di tlogetšwego gomme di tšeelwa legato ke rootMargin. Go boloka go sepelelana ga morago, re tla tšwela pele go sekaseka e filwego offsetgo rootMargin, eupša tšobotsi ye e tla tlošwa go v6 .

Mekgwa ya go šoma

Mokgwa	Tlhalošo
`dispose`	E senya scrollspy ya elemente. (E tloša ya data ye e bolokilwego go elemente ya DOM)
`getInstance`	Mokgwa wa go se fetoge go hwetša mohlala wa scrollspy wo o amanago le elemente ya DOM.
`getOrCreateInstance`	Mokgwa wa go se fetoge wa go hwetša mohlala wa scrollspy wo o amanago le elemente ya DOM, goba go hlama ye mpsha ge go ka direga gore e se ya thongwa.
`refresh`	Ge o tlaleletša goba o tloša dielemente ka go DOM, o tla swanelwa ke go bitša mokgwa wa go hlabolla.

Mohlala ke wo o dirišago mokgwa wa go hlabolla:

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

Ditiragalo

Tiragalo	Tlhalošo
`activate.bs.scrollspy`	Tiragalo ye e thunya godimo ga elemente ya go phuthwa neng le neng ge tshetledi e šomišwa ke scrollspy.

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