Scrollspy

Awtomatikong i-update ang Bootstrap navigation o ilista ang mga component sa grupo base sa posisyon sa scroll aron ipakita kung unsang link ang aktibo karon sa viewport.

Niini nga panid

Giunsa kini paglihok

Gibalhin sa Scrollspy ang .activeklase sa mga elemento sa angkla ( <a>) kung ang elemento nga adunay gi- idrefer sa anchor hrefma-scroll sa pagtan-aw. Ang Scrollspy labing maayo nga gigamit kauban sa usa ka Bootstrap nav component o list group , apan kini magamit usab sa bisan unsang mga elemento sa angkla sa kasamtangan nga panid. Ania kung giunsa kini paglihok.

Sa pagsugod, ang scrollspy nagkinahanglan og duha ka butang: usa ka nabigasyon, listahan nga grupo, o usa ka yano nga hugpong sa mga link, dugang usa ka scrollable nga sudlanan. Ang scrollable nga sudlanan mahimong ang <body>o usa ka custom nga elemento nga adunay set heightug overflow-y: scroll.
Sa scrollable nga sudlanan, idugang data-bs-spy="scroll"ug data-bs-target="#navId"asa navIdang talagsaon idsa kaubang nabigasyon. Siguroha nga ilakip usab ang usa tabindex="0"aron masiguro ang pag-access sa keyboard.
Sa imong pag-scroll sa "spied" nga sudlanan, usa ka .activeklase ang gidugang ug gitangtang gikan sa mga link sa angkla sulod sa kaubang nabigasyon. Ang mga link kinahanglan nga adunay masulbad idnga mga target, kung dili kini gibalewala. Pananglitan, <a href="#home">home</a>kinahanglan nga katumbas sa usa ka butang sa DOM sama<div id="home"></div>
Ang mga target nga elemento nga dili makita dili tagdon. Tan-awa ang seksyon nga Dili makita nga mga elemento sa ubos.

Mga pananglitan

I-scroll ang dapit ubos sa navbar ug tan-awa ang aktibong kausaban sa klase. Ablihi ang dropdown menu ug tan-awa ang dropdown nga mga butang nga gipasiugda usab.

Unang ulohan

Kini mao ang pipila ka placeholder sulod alang sa scrollspy panid. Timan-i nga samtang nag-scroll ka sa panid, ang angay nga link sa nabigasyon gipasiugda. Gisubli kini sa tibuok nga pananglitan sa component. Nagpadayon kami sa pagdugang sa pipila ka pananglitan nga kopya dinhi aron ipasiugda ang pag-scroll ug pag-highlight.

Ikaduha nga ulohan

Ikatulo nga ulohan

Ikaupat nga ulohan

Ikalima nga ulohan

<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 usab nagtrabaho uban sa nested .navs. Kung ang usa ka salag .nav, .activeang mga ginikanan niini usab .active. Pag-scroll sa lugar tapad sa navbar ug tan-awa ang aktibo nga pagbag-o sa klase.

aytem 1

Hinumdomi nga ang plugin sa JavaScript mosulay sa pagpili sa husto nga elemento taliwala sa tanan nga makita. Daghang makita nga mga target sa scrollspy sa parehas nga oras mahimong hinungdan sa pipila ka mga isyu.

Butang 1-1

Butang 1-2

aytem 2

aytem 3

aytem 3-1

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

Ilista ang grupo

Scrollspy usab nagtrabaho uban sa .list-groups. I-scroll ang dapit tapad sa listahan nga grupo ug tan-awa ang aktibong kausaban sa klase.

aytem 1 aytem 2 aytem 3 aytem 4

aytem 1

aytem 2

aytem 3

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

Yano nga mga angkla

Ang Scrollspy dili limitado sa mga sangkap sa nav ug mga grupo sa lista, busa kini molihok sa bisan unsang <a>mga elemento sa angkla sa karon nga dokumento. Pag-scroll sa lugar ug tan-awa ang .activepagbag-o sa klase.

aytem 1 aytem 2 aytem 3 aytem 4 aytem 5

aytem 1

aytem 2

aytem 3

aytem 4

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

Dili makita nga mga elemento

Ang mga target nga elemento nga dili makita ibaliwala ug ang ilang katugbang nga nav item dili makadawat ug .activeklase. Ang scrollspy nga mga higayon nga gisugdan sa usa ka dili makita nga wrapper dili magtagad sa tanan nga target nga mga elemento. Gamita ang refreshpamaagi aron masusi kung adunay makita nga mga elemento kung makita na ang wrapper.

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

Paggamit

Pinaagi sa data attributes

Aron dali nga makadugang sa scrollspy nga kinaiya sa imong topbar navigation, idugang data-bs-spy="scroll"sa elemento nga gusto nimong espiya (kasagaran kini mao ang <body>). Dayon idugang ang data-bs-targetattribute nga adunay ido class name sa parent element sa bisan unsang Bootstrap .navcomponent.

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

Pinaagi sa JavaScript

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

Mga kapilian

Ingon nga ang mga kapilian mahimong ipasa pinaagi sa data attributes o JavaScript, mahimo nimong idugang ang ngalan sa opsyon sa data-bs-, sama sa data-bs-animation="{value}". Siguruha nga usbon ang tipo sa kaso sa ngalan sa kapilian gikan sa " CamelCase " ngadto sa " kebab-case " kung ipasa ang mga kapilian pinaagi sa mga attribute sa datos. Pananglitan, gamita data-bs-custom-class="beautifier"imbes nga data-bs-customClass="beautifier".

Ingon sa Bootstrap 5.2.0, ang tanan nga mga sangkap nagsuporta sa usa ka eksperimento nga gireserba nga kinaiya sa datos data-bs-confignga mahimo’g ibutang ang yano nga pag-configure sa sangkap ingon usa ka string sa JSON. Kung ang usa ka elemento adunay data-bs-config='{"delay":0, "title":123}'ug data-bs-title="456"mga hiyas, ang katapusan titlenga kantidad mao ang 456ug ang bulag nga mga hiyas sa datos mag-override sa mga kantidad nga gihatag sa data-bs-config. Dugang pa, ang naglungtad nga mga hiyas sa datos makahimo sa pagbutang sa mga kantidad sa JSON sama sa data-bs-delay='{"show":0,"hide":150}'.

Ngalan	Matang	Default	Deskripsyon
`rootMargin`	hilo	`0px 0px -25%`	Intersection Observer rootMargin balido nga mga yunit, sa diha nga pagkalkulo scroll posisyon.
`smoothScroll`	boolean	`false`	Makapahimo sa hapsay nga pag-scroll kung ang usa ka tiggamit nag-klik sa usa ka link nga nagtumong sa mga naobserbahan sa ScrollSpy.
`target`	string, elemento sa DOM	`null`	Gipiho ang elemento aron magamit ang Scrollspy plugin.
`threshold`	han-ay	`[0.1, 0.5, 1]`	`IntersectionObserver` balido nga balido nga input, kung gikalkula ang posisyon sa scroll.

Wala na gigamit nga mga Opsyon

Hangtod sa v5.1.3 among gigamit ang offset& methodmga kapilian, nga karon wala na gamita ug gipulihan sa rootMargin. Aron mapadayon ang paatras nga pagkaangay, magpadayon kami sa pag-parse sa gihatag offsetsa rootMargin, apan kini nga bahin tangtangon sa v6 .

Pamaagi

Pamaagi	Deskripsyon
`dispose`	Makaguba sa scrollspy sa usa ka elemento. (Gikuha ang gitipigan nga datos sa elemento sa DOM)
`getInstance`	Static nga pamaagi aron makuha ang scrollspy nga pananglitan nga may kalabutan sa usa ka elemento sa DOM.
`getOrCreateInstance`	Static nga pamaagi aron makuha ang scrollspy nga instance nga may kalabutan sa usa ka elemento sa DOM, o paghimo og bag-o kung wala kini gisugdan.
`refresh`	Kung magdugang o magtangtang sa mga elemento sa DOM, kinahanglan nimo nga tawagan ang pamaagi sa pag-refresh.

Ania ang usa ka pananglitan gamit ang pamaagi sa pag-refresh:

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

Mga panghitabo

Panghitabo	Deskripsyon
`activate.bs.scrollspy`	Kini nga panghitabo nagdilaab sa scroll nga elemento kung ang usa ka angkla gi-activate sa scrollspy.

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