Scrollspy

Uppfærðu sjálfkrafa Bootstrap siglingar eða lista hóphluta byggt á skrunstöðu til að gefa til kynna hvaða hlekkur er virkur í útsýnisglugganum.

Á þessari síðu

Hvernig það virkar

Scrollspy kveikir á .activebekknum á akkerisþáttum ( <a>) þegar einingunni með því idsem akkerið vísar til hrefer skrunað á sjónarsviðið. Scrollspy er best að nota í tengslum við Bootstrap nav hluta eða listahóp , en það mun einnig virka með hvaða akkeri sem er á núverandi síðu. Svona virkar það.

Til að byrja þarf scrollspy tvennt: flakk, listahóp eða einfalt sett af tenglum, auk flettans íláts. Skrunagámurinn getur verið <body>eða sérsniðinn þáttur með setti heightog overflow-y: scroll.
Á skrunanlega ílátinu, bætið við data-bs-spy="scroll"og data-bs-target="#navId"hvar navIder sérstakt idtilheyrandi flakk. Vertu viss um að láta einnig fylgja með tabindex="0"til að tryggja aðgang að lyklaborði.
Þegar þú flettir um „njósnað“ ílátið er .activebekk bætt við og fjarlægður af akkerartenlum innan tilheyrandi leiðsögu. Tenglar verða að hafa leysanleg idmarkmið, annars er hunsað. Til dæmis <a href="#home">home</a>verður að samsvara einhverju í DOM eins og<div id="home"></div>
Markþættir sem eru ekki sýnilegir verða hunsaðir. Sjá kaflann Ósýnilegir þættir hér að neðan.

Dæmi

Skrunaðu svæðið fyrir neðan siglingastikuna og horfðu á virka bekkinn breytast. Opnaðu fellivalmyndina og horfðu á að fellilistaatriðin séu auðkennd líka.

Fyrsta fyrirsögn

Þetta er staðgengilsefni fyrir scrollspy síðuna. Athugaðu að þegar þú flettir niður síðuna er viðeigandi siglingartengill auðkenndur. Það er endurtekið í gegnum íhlutunardæmið. Við höldum áfram að bæta við fleiri dæmum hér til að leggja áherslu á að fletta og auðkenna.

Önnur fyrirsögn

Þriðja fyrirsögn

Fjórða fyrirsögn

Fimmta fyrirsögn

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

Hreiður nav

Scrollspy vinnur einnig með hreiður .navs. Ef hreiður .naver .active, verða foreldrar þess einnig .active. Skrunaðu yfir svæðið við hlið stýrisstikunnar og horfðu á virka bekkinn breytast.

Liður 1

Hafðu í huga að JavaScript viðbótin reynir að velja rétta þáttinn meðal alls þess sem gæti verið sýnilegt. Mörg sýnileg scrollspy skotmörk á sama tíma geta valdið sumum vandamálum.

Liður 1-1

Liður 1-2

Liður 2

Liður 3

Liður 3-1

Liður 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>

Listahópur

Scrollspy vinnur líka með .list-groups. Skrunaðu svæðið við hlið listahópsins og horfðu á virka bekkinn breytast.

Liður 1 Liður 2 Liður 3 Liður 4

Liður 1

Liður 2

Liður 3

Liður 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>

Einföld akkeri

Scrollspy er ekki takmörkuð við nav hluti og listahópa, svo það mun virka á hvaða <a>akkeri sem er í núverandi skjali. Skrunaðu um svæðið og horfðu á .activebekkinn breytast.

Liður 1 Liður 2 Liður 3 Liður 4 5. liður

Liður 1

Liður 2

Liður 3

Liður 4

5. liður

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

Ósýnilegir þættir

Markþættir sem eru ekki sýnilegir verða hunsaðir og samsvarandi nav atriði þeirra fá ekki .activeflokk. Scrollspy tilvik sem eru frumstillt í ósýnilegum umbúðum munu hunsa alla markþætti. Notaðu refreshaðferðina til að athuga hvort sjáanlegir þættir eru þegar umbúðirnar verða sýnilegar.

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

Notkun

Í gegnum gagnaeiginleika

Til að bæta scrollspy hegðun auðveldlega við toppstikuna þína skaltu bæta data-bs-spy="scroll"við þættinum sem þú vilt njósna um (oftast væri þetta <body>). Bættu síðan við data-bs-targeteigindinni með ideða flokksheiti foreldraþáttar hvers Bootstrap .navíhluta.

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

Með JavaScript

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

Valmöguleikar

Þar sem hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript geturðu bætt valkostsheiti við data-bs-, eins og í data-bs-animation="{value}". Gakktu úr skugga um að breyta tilfelli tegundar valmöguleikans úr " camelCase " í " kebab-case " þegar þú sendir valkostina í gegnum gagnaeiginleika. Notaðu til dæmis data-bs-custom-class="beautifier"í staðinn fyrir data-bs-customClass="beautifier".

Frá og með Bootstrap 5.2.0 styðja allir íhlutir tilrauna frátekinn gagnaeiginleika data-bs-configsem getur hýst einfalda íhlutastillingu sem JSON streng. Þegar eining hefur data-bs-config='{"delay":0, "title":123}'og eiginleika verður data-bs-title="456"lokagildið og aðskildu gagnaeiginirnar munu hnekkja gildum sem gefin eru á . Að auki geta núverandi gagnaeiginleikar hýst JSON gildi eins og .title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Nafn	Tegund	Sjálfgefið	Lýsing
`rootMargin`	strengur	`0px 0px -25%`	Gatnamót Observer rootMargin gildar einingar, við útreikninga á skrunstöðu.
`smoothScroll`	Boolean	`false`	Gerir kleift að fletta sléttri þegar notandi smellir á hlekk sem vísar til sýnilegra ScrollSpy.
`target`	strengur, DOM frumefni	`null`	Tilgreinir þátt til að nota Scrollspy viðbótina.
`threshold`	fylki	`[0.1, 0.5, 1]`	`IntersectionObserver` gild inntak fyrir þröskuld , við útreikning á flettustöðu.

Úreltir valkostir

Fram að v5.1.3 vorum við að nota offset& methodvalkosti, sem eru nú úreltir og skipt út fyrir rootMargin. Til að halda afturábak eindrægni munum við halda áfram að þátta gefið offsettil rootMargin, en þessi eiginleiki verður fjarlægður í v6 .

Aðferðir

Aðferð	Lýsing
`dispose`	Eyðir scrollspy frumefnis. (Fjarlægir vistuð gögn á DOM-einingunni)
`getInstance`	Statísk aðferð til að fá scrollspy tilvikið tengt við DOM frumefni.
`getOrCreateInstance`	Static aðferð til að fá scrollspy tilvikið tengt við DOM frumefni, eða til að búa til nýjan ef það var ekki frumstillt.
`refresh`	Þegar þú bætir við eða fjarlægir þætti í DOM þarftu að kalla á endurnýjunaraðferðina.

Hér er dæmi sem notar endurnýjunaraðferðina:

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

Viðburðir

Viðburður	Lýsing
`activate.bs.scrollspy`	Þessi atburður kviknar á skrunelementinu í hvert sinn sem akkeri er virkjað af scrollspy.

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