Scrollspy

Sinthani zokha mayendedwe a Bootstrap kapena mndandanda wamagulu amagulu kutengera malo osindikizira kuti muwonetse ulalo womwe ukugwira ntchito powonera.

Patsamba ili

Momwe zimagwirira ntchito

Scrollspy amatembenuza .activekalasi pa nangula ( <a>) zinthu pamene chinthu chomwe chili idndi nangula hrefchimasunthidwa kuti chiwoneke. Scrollspy imagwiritsidwa ntchito bwino limodzi ndi gawo la Bootstrap nav kapena gulu la mndandanda , koma idzagwiranso ntchito ndi zida zilizonse za nangula patsamba lapano. Umu ndi momwe zimagwirira ntchito.

Kuti muyambe, scrollspy imafuna zinthu ziwiri: kuyenda, gulu la mndandanda, kapena maulalo osavuta, kuphatikiza chidebe chosunthika. Chidebe chosunthika chikhoza kukhala <body>chokhazikika kapena chokhazikika chokhala ndi seti heightndi overflow-y: scroll.
Pa chidebe chosunthika, onjezani data-bs-spy="scroll"ndi data-bs-target="#navId"komwe navIdkuli kosiyanako idkomwe kumayendera. Onetsetsani kuti muphatikizepo a tabindex="0"kuti mutsimikizire kupezeka kwa kiyibodi.
Pamene mukupukuta chidebe "chozonda", .activekalasi imawonjezedwa ndikuchotsedwa pamalumikizidwe a nangula mumayendedwe ogwirizana nawo. Maulalo akuyenera kukhala ndi makonda omwe angathetsedwe id, apo ayi adzanyalanyazidwa. Mwachitsanzo, <a href="#home">home</a>ziyenera kugwirizana ndi china chake mu DOM ngati<div id="home"></div>
Zolinga zomwe sizikuwoneka sizidzanyalanyazidwa. Onani gawo la Zinthu Zosawoneka pansipa.

Zitsanzo

Sungani malo omwe ali pansi pa navbar ndikuwona kusintha kwa kalasi yogwira. Tsegulani menyu yotsitsa ndikuwoneranso zinthu zotsikira zikuwonetsedwanso.

Mutu woyamba

Izi ndi zina zomwe zili patsamba la scrollspy. Zindikirani kuti pamene mukutsitsa tsambalo, ulalo woyenera wakusaka umawonetsedwa. Imabwerezedwa mu gawo lonse lachitsanzo. Tikupitiriza kuwonjezera chitsanzo china apa kuti titsindike kupukuta ndi kuwunikira.

Mutu wachiwiri

Mutu wachitatu

Mutu wachinayi

Mutu wachisanu

<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 imagwiranso ntchito ndi nested .navs. Ngati chisa .navchili .active, makolo akenso adzakhala .active. Mpukutu pafupi ndi navbar ndikuwona kusintha kwa kalasi yogwira.

Chinthu 1

Kumbukirani kuti pulogalamu yowonjezera ya JavaScript imayesa kusankha chinthu choyenera pakati pa zonse zomwe zingawoneke. Zolinga zingapo zowoneka bwino nthawi imodzi zimatha kuyambitsa zovuta zina.

Chithunzi 1-1

Chithunzi 1-2

Chinthu 2

Chinthu 3

Chithunzi 3-1

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

Lembani gulu

Scrollspy imagwiranso ntchito ndi .list-groups. Mpukutu m'dera pafupi ndi mndandanda gulu ndi kuona yogwira kusintha kalasi.

Chinthu 1 Chinthu 2 Chinthu 3 Chinthu 4

Chinthu 1

Chinthu 2

Chinthu 3

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

Nangula zosavuta

Scrollspy sichimangokhala ndi zigawo za nav ndi magulu a mndandanda, kotero idzagwira ntchito pazinthu zilizonse <a>za nangula mu chikalata chamakono. Mpukutu m'dera ndi kuona .activekalasi kusintha.

Chinthu 1 Chinthu 2 Chinthu 3 Chinthu 4 Chinthu 5

Chinthu 1

Chinthu 2

Chinthu 3

Chinthu 4

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

Zinthu zosawoneka

Zolinga zomwe sizikuwoneka sizidzanyalanyazidwa ndipo zofananira nazo sizidzalandira .activekalasi. Zochitika za Scrollspy zoyambika muzokulunga zosawoneka sizinyalanyaza zinthu zonse zomwe mukufuna. Gwiritsani ntchito refreshnjirayi kuti muwone zinthu zomwe zimawoneka ngati chopukutira chikuwonekera.

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

Kugwiritsa ntchito

Kudzera muzochita za data

Kuti muwonjezere machitidwe a scrollspy pamayendedwe anu apamwamba, onjezani data-bs-spy="scroll"ku chinthu chomwe mukufuna kuti mukazonde (nthawi zambiri izi zitha kukhala <body>). Kenako onjezani zomwe zili data-bs-targetndi dzina idkapena kalasi la kholo la gawo lililonse la 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>

Kudzera pa JavaScript

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

Zosankha

Monga zosankha zitha kuperekedwa kudzera pa data kapena JavaScript, mutha kuwonjezera dzina lachisankho ku data-bs-, monga data-bs-animation="{value}". Onetsetsani kuti musinthe mtundu wamtundu wa dzina lachisankho kuchokera ku " camelCase " kupita ku " kebab-case " podutsa zosankha pogwiritsa ntchito zizindikiro za data. Mwachitsanzo, gwiritsani ntchito data-bs-custom-class="beautifier"m'malo mwa data-bs-customClass="beautifier".

Kuyambira pa Bootstrap 5.2.0, zigawo zonse zimathandizira chidziwitso chosungidwa cha data data-bs-configchomwe chingathe kukhazikitsa chigawo chosavuta ngati chingwe cha JSON. Chilichonse chikakhala ndi mawonekedwe , mtengo womaliza udzakhala ndipo mawonekedwe osiyana a data adzapitilira zomwe zaperekedwa data-bs-config='{"delay":0, "title":123}'pa . Kuphatikiza apo, zomwe zilipo kale zimatha kusunga ma JSON monga .data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Dzina	Mtundu	Zosasintha	Kufotokozera
`rootMargin`	chingwe	`0px 0px -25%`	Magawo ovomerezeka a Intersection Observer rootMargin , powerengera malo a mpukutu.
`smoothScroll`	boolean	`false`	Imathandizira kusuntha kosalala pamene wogwiritsa ntchito adina ulalo womwe umatanthawuza zowoneka ndi ScrollSpy.
`target`	chingwe, chinthu cha DOM	`null`	Imatchula chinthu choti mugwiritse ntchito pulogalamu yowonjezera ya Scrollspy.
`threshold`	gulu	`[0.1, 0.5, 1]`	`IntersectionObserver` poyambira , powerengera malo a mpukutu.

Zosankha Zosiya

Mpaka v5.1.3 tinkagwiritsa ntchito offset& methodzosankha, zomwe tsopano zachotsedwa ndikusinthidwa ndi rootMargin. Kuti tisunge zogwirizana m'mbuyo, tipitiliza kuwerengera zomwe zaperekedwa offset, rootMarginkoma izi zichotsedwa mu v6 .

Njira

Njira	Kufotokozera
`dispose`	Imawononga scrollspy ya chinthu. (Imachotsa deta yosungidwa pa chinthu cha DOM)
`getInstance`	Njira yosasunthika kuti scrollspy igwirizane ndi chinthu cha DOM.
`getOrCreateInstance`	Njira yosasunthika yopangitsa kuti mawonekedwe a scrollspy agwirizane ndi chinthu cha DOM, kapena kupanga chatsopano ngati sichinayambike.
`refresh`	Mukawonjezera kapena kuchotsa zinthu mu DOM, muyenera kuyimbira njira yotsitsimutsa.

Nachi chitsanzo pogwiritsa ntchito njira yotsitsimutsa:

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

Zochitika

Chochitika	Kufotokozera
`activate.bs.scrollspy`	Chochitikachi chimayaka pamipukutu nthawi iliyonse nangula akatsegulidwa ndi scrollspy.

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