Scrollspy jechuun kan beekamu

Hidhaa kamtu yeroo ammaa buufata ilaalchaa keessatti socho'aa akka jiru agarsiisuuf bakka tarree irratti hundaa'uun qaamolee garee tarree ykn qaamolee garee tarree ofumaan fooyyessa.

Fuula kana irratti

Akkaataa itti hojjetu

Scrollspy .activegita qaamolee anchor ( <a>) irratti yeroo qaamni anchor'n idwabeeffame waliin hrefgara mul'ataatti garagalfamu jijjiira. Scrollspy qaama nav Bootstrap ykn garee tarree wajjin walqabatee fayyadamuun gaarii dha , garuu akkasumas qaamolee anchor kamiyyuu fuula ammaa keessatti ni hojjeta. Akkaataa itti hojjetu kunooti.

Jalqabuuf, scrollspy waan lama barbaada: qajeelcha, garee tarree, ykn tuuta salphaa hidhannoo, dabalataan qabduu garagalfamuu danda'u. Qabduun garagalfamuu danda'u kan <body>ykn qaama amala tuuta heightfi overflow-y: scroll.
Qabduu garagalfamuu danda'u irratti, dabali data-bs-spy="scroll"fi data-bs-target="#navId"eessa navIdadda ta'e idkan navigeeshinii walqabate. tabindex="0"Akkasumas qaqqabummaa kiiboordii mirkaneessuuf a dabaluu kee mirkaneessi.
Yeroo qabduu “basaasame” garagalchitu, .activegitaan tokko dabalamee hidhaawwan anchor irraa navigeeshinii walqabate keessaa ni haqama. Hidhamtoonni idgalmoota furmaata argachuu danda'an qabaachuu qabu, yoo kana hin taane tuffatamu. Fakkeenyaaf, a <a href="#home">home</a>waan DOM keessa jiru tokko waliin walsimuu qaba like<div id="home"></div>
Qaamonni xiyyeeffannoo hin mul'anne ni tuffatamu. Kutaa Qaamolee hin mul'anne armaan gadii ilaali .

Fakkeenyaaf

Naannoo navbar jala jiru garagalchiiti jijjiirama gita socho'aa ilaali. Sajoo gadi bu'aa baniitii wantoonni tarree akkasuma akka calaqqisan ilaali.

Mata duree jalqabaa

Kun qabiyyee iddooqa tokko tokkoo fuula scrollspy tiif. Hubadhu, yeroo fuula gadi garagalchitu, hidhiin qajeelchaa sirrii ta'e akka calaqqisu. Fakkeenya qaama guutuu keessatti irra deddeebi'ameera. Asitti waraabbii fakkeenyaa dabalataa tokko tokko dabaluu itti fufna, kunis garagalchuu fi calaqqisiisuu cimsuuf.

Mata duree lammaffaa

Mata duree sadaffaa

Mata duree afraffaan

Mata duree shanaffaa

<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 akkasumas nested .navs wajjin hojjeta. Yoo nested .navta'e .activewarri isaas ni ta'u .active. Naannoo navbar cina jiru garagalchiiti jijjiirama gita socho'aa ilaali.

Qabxii 1.

Ijaarsi JaavaScript elementii sirrii ta'e kanneen mul'achuu danda'an hunda keessaa filachuuf akka yaalu yaada keessa galchi. Target scrollspy mul'atan hedduu yeroo tokkotti dhimmoota tokko tokko fiduu danda'u.

Qabxii 1-1

Qabxii 1-2

Qabxii 2ffaa

Qabxii 3ffaa

Qabxii 3-1

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

Garee tarreessi

Scrollspy akkasumas .list-groups wajjin hojjeta. Naannoo garee tarree cinaa jiru garagalchiiti jijjiirama gita socho'aa ilaali.

Qabxii 1. Qabxii 2ffaa Qabxii 3ffaa Qabxii 4.

Qabxii 1.

Qabxii 2ffaa

Qabxii 3ffaa

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

Ankuraa salphaa

Scrollspy qaamolee nav fi gareewwan tarree qofaan hin daangeffamu, kanaafuu <a>elementoota anchor kamiyyuu galmee ammaa keessatti ni hojjeta. Naannoo sana garagalchiiti .activejijjiirama daree ilaali.

Qabxii 1. Qabxii 2ffaa Qabxii 3ffaa Qabxii 4. Qabxii 5.

Qabxii 1.

Qabxii 2ffaa

Qabxii 3ffaa

Qabxii 4.

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

Qaamolee hin mul’anne

Qaamonni galmee hin mul'anne ni tuffatamu fi wantoonni nav isaanii walgitan .activegita hin fudhatan. Fakkeenyonni scrollspy marfata hin mul'anne keessatti jalqabaman qaamolee galmee hunda ni tuffatu. refreshMarfataan erga mul'atee booda elementoota ilaalamuu danda'an sakatta'uuf mala fayyadami .

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

Fayyadama

Karaa amaloota deetaa

Amala scrollspy salphaatti gara navigeeshinii barruu gubbaa keetti dabaluuf, data-bs-spy="scroll"elementii basaasuu barbaaddutti dabali (baay'inaan kun kan ta'a <body>). Sana booda data-bs-targetamalli idmaqaa ykn gita qaama warraa qaama Bootstrap kamiyyuu waliin dabali .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>

Karaa JaavaScript

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

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu waan danda'uuf, maqaa filannoo gara data-bs-, akka keessatti dabaluu dandeessa data-bs-animation="{value}". Yeroo filannoowwan karaa amaloota deetaa dabarsitu akaakuu keesii maqaa filannoo “ camelCase ” irraa gara “ kebab-case ” jijjiiruu kee mirkaneessi. Fakkeenyaaf, data-bs-custom-class="beautifier"bakka data-bs-customClass="beautifier".

Bootstrap 5.2.0 irraa eegalee, qaamolee hundi amaloota deetaa yaaliidata-bs-config eegame kan qindeessaa qaama salphaa akka tarree JSON qabachuu danda'u deeggaru. Yeroo qaamni tokko amaloota data-bs-config='{"delay":0, "title":123}'fi qabu data-bs-title="456", gatii dhumaa titleta'a 456fi amaloonni deetaa adda addaa gatiiwwan irratti kennaman irra darbu data-bs-config. Dabalataan, amaloonni deetaa jiran gatiiwwan JSON akka data-bs-delay='{"show":0,"hide":150}'.

Maqaa	Akaakuu	Durtii dha	Ibsa
`rootMargin`	hidhaa	`0px 0px -25%`	Yuunitoota sirrii ta'an hundee Margin Taajjabduu Qaxxaamuraa , yeroo iddoo tarree shallagdu.
`smoothScroll`	boolee	`false`	Yeroo fayyadamaan hidhaa ilaaltoota ScrollSpy wabeeffatu cuqaasu, qajeelcha sirriitti dandeessisa.
`target`	tarree, qaama DOM	`null`	Qaama ifteessa Scrollspy plugin hojii irra oolchuuf.
`threshold`	tarree	`[0.1, 0.5, 1]`	`IntersectionObserver` galtee sirrii ujummoo , yeroo bakka tarree shallagdu.

Filannoowwan hin barbaachifne

Hanga v5.1.3tti offset& methodoptions fayyadamaa turre, isaan amma deprecated fi rootMargin. offsetWalsimsiisa duubatti deebi'uu eeguuf, kenname tokko parse gochuu itti fufna , garuu amalli kun v6rootMargin keessatti ni haqama .

Malawwan

Mala	Ibsa
`dispose`	Scrollspy elementii tokkoo ni balleessa. (Deetaa qaama DOM irratti kuufame ni haqa)
`getInstance`	Fakkeenya scrollspy elementii DOM waliin walqabate argachuuf mala istaatiksii .
`getOrCreateInstance`	Mala istaatiksii fakkeenya scrollspy elementii DOM waliin walqabate argachuuf, ykn yoo hin jalqabne haaraa uumuuf.
`refresh`	Yeroo elementoota DOM keessatti dabaltu ykn haqxu, mala haaromsaa waamuun si barbaachisa.

Fakkeenyi mala haaromsaa fayyadamuun kunooti:

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

Taateewwan

Taatee	Ibsa
`activate.bs.scrollspy`	Taatee kun yeroo hunda anchor scrollspy'n hojiirra oolu elementii tarree irratti dhukaasa.

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

Scrollspy jechuun kan beekamu

Akkaataa itti hojjetu

Fakkeenyaaf

Navbar jedhama

Mata duree jalqabaa

Mata duree lammaffaa

Mata duree sadaffaa

Mata duree afraffaan

Mata duree shanaffaa

Nested nav

Qabxii 1.

Qabxii 1-1

Qabxii 1-2

Qabxii 2ffaa

Qabxii 3ffaa

Qabxii 3-1

Qabxii 3-2

Garee tarreessi

Qabxii 1.

Qabxii 2ffaa

Qabxii 3ffaa

Qabxii 4.

Ankuraa salphaa

Qabxii 1.

Qabxii 2ffaa

Qabxii 3ffaa

Qabxii 4.

Qabxii 5.

Qaamolee hin mul’anne

Fayyadama

Karaa amaloota deetaa

Karaa JaavaScript

Filannoowwan

Malawwan

Taateewwan