Scrollspy

Automatesch Update Bootstrap Navigatioun oder Lëscht Grupp Komponente baséiert op Scroll Positioun fir unzeginn wéi eng Link am Moment aktiv ass am Viewport.

Op dëser Säit

Wéi et funktionnéiert

Scrollspy wiesselt d' .activeKlass op Anker ( <a>) Elementer wann d'Element mat der idreferenzéierter vun den Anker hrefan d'Siicht gescrollt gëtt. Scrollspy ass am beschten a Verbindung mat engem Bootstrap nav Komponent oder Lëscht Grupp benotzt , awer et funktionnéiert och mat all Ankerelementer op der aktueller Säit. Hei ass wéi et funktionnéiert.

Fir unzefänken, erfuerdert Scrollspy zwou Saachen: eng Navigatioun, Lëschtegrupp oder en einfache Set vu Linken, plus e scrollable Container. De scrollable Container kann den <body>oder e personaliséierten Element mat engem Set heightan overflow-y: scroll.
Op de scrollable Container, füügt data-bs-spy="scroll"a data-bs-target="#navId"wou navIdass déi eenzegaarteg idvun der assoziéierter Navigatioun. Ginn sécher och e tabindex="0"fir Keyboard Zougang ze garantéieren.
Wéi Dir de "spionéierten" Container scrollt, gëtt eng .activeKlass bäigefüügt an aus Ankerlinks an der verbonne Navigatioun geläscht. Links mussen opléisbar idZiler hunn, soss gi se ignoréiert. Zum Beispill, e <a href="#home">home</a>Must entsprécht eppes an der DOM wéi<div id="home"></div>
Zilelementer déi net sichtbar sinn, ginn ignoréiert. Gesinn d' Net-siichtbar Elementer Rubrik ënnert.

Beispiller

Scroll d'Gebitt ënner der Navbar a kuckt d'aktiv Klass änneren. Öffnen den Dropdown-Menü a kuckt wéi d'Dropdown-Elementer och markéiert ginn.

Éischt Rubrik

Dëst ass e puer Plazhalter Inhalt fir d'Scrollspy Säit. Notéiert datt wann Dir op d'Säit scrollt, gëtt de passende Navigatiounslink markéiert. Et gëtt am ganze Komponent Beispill widderholl. Mir addéiere weider e puer Beispiller Kopie hei fir d'Scrollen an Highlight ze ënnersträichen.

Zweet Rubrik

Drëtt Rubrik

Véiert Rubrik

Fënneften Rubrik

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

Gesteiert nav

Scrollspy Wierker och mat nested .navs. Wann e Nest .navass .active, wäerten seng Elteren och .active. Scroll d'Gebitt nieft der Navbar a kuckt d'aktiv Klass änneren.

Artikel 1

Denkt drun datt de JavaScript Plugin probéiert dat richtegt Element aus all deem wat sichtbar ass ze wielen. Multiple siichtbar Scrollspy Ziler zur selwechter Zäit kënnen e puer Probleemer verursaachen.

Punkt 1-1

Punkt 1-2

Artikel 2

Artikel 3

Punkt 3-1

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

Lëscht Grupp

Scrollspy Wierker och mat .list-groups. Scroll de Beräich nieft der Lëscht Grupp a kuckt déi aktiv Klass änneren.

Artikel 1 Artikel 2 Artikel 3 Artikel 4

Artikel 1

Artikel 2

Artikel 3

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

Einfach Anker

Scrollspy ass net limitéiert op nav Komponenten a Lëschtgruppen, sou datt et op all <a>Ankerelementer am aktuellen Dokument funktionnéiert. Scroll d'Géigend a kuckt d' .activeKlass änneren.

Artikel 1 Artikel 2 Artikel 3 Artikel 4 Artikel 5

Artikel 1

Artikel 2

Artikel 3

Artikel 4

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

Net siichtbar Elementer

Zil Elementer déi net siichtbar sinn ignoréiert ginn an hir entspriechend nav Elementer kréien net eng .activeKlass. Scrollspy Instanzen initialiséiert an engem net sichtbare Wrapper ignoréieren all Zilelementer. Benotzt d' refreshMethode fir no beobachtbaren Elementer ze kontrolléieren wann de Wrapper siichtbar ass.

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

Benotzung

Duerch Daten Attributer

Fir einfach scrollspy Verhalen op Är Topbar Navigatioun ze addéieren data-bs-spy="scroll", füügt dat Element un op deen Dir wëllt spionéieren (meeschtens wier dëst de <body>). Füügt dann den data-bs-targetAttribut mat dem idoder Klassennumm vum Elterendeel vun all Bootstrap .navKomponent un.

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

Iwwer JavaScript

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

Optiounen

Wéi Optiounen kënnen iwwer Dateattributer oder JavaScript weidergeleet ginn, kënnt Dir en Optiounsnumm op data-bs-, wéi an data-bs-animation="{value}". Vergewëssert Iech de Falltyp vum Optiounsnumm vun " camelCase " op " Kebab-Case " z'änneren wann Dir d'Optiounen iwwer Datenattributer passéiert. Zum Beispill benotzt data-bs-custom-class="beautifier"amplaz data-bs-customClass="beautifier".

Zënter Bootstrap 5.2.0 ënnerstëtzen all Komponenten en experimentellen reservéierten Dateattribut, data-bs-configdeen eng einfach Komponentkonfiguratioun als JSON-String kann ënnerhuelen. Wann en Element data-bs-config='{"delay":0, "title":123}'an data-bs-title="456"Attributer huet, gëtt de Finale titleWäert 456an déi getrennten Dateattributter iwwerschreiden Wäerter, déi op data-bs-config. Zousätzlech kënnen existent Datenattributer JSON Wäerter wéi data-bs-delay='{"show":0,"hide":150}'.

Numm	Typ	Default	Beschreiwung
`rootMargin`	String	`0px 0px -25%`	Kräizung Observateur rootMargin valabel Unitéiten, wann Berechent Scroll Positioun.
`smoothScroll`	boolesch	`false`	Aktivéiert glat Scrollen wann e Benotzer op e Link klickt deen op ScrollSpy Observables bezitt.
`target`	String, DOM Element	`null`	Spezifizéiert Element fir Scrollspy Plugin z'applizéieren.
`threshold`	Array	`[0.1, 0.5, 1]`	`IntersectionObserver` Schwell gëlteg Input, wann Dir Scrollpositioun berechnen.

Deprecéiert Optiounen

Bis v5.1.3 hu mir offset& methodOptiounen benotzt, déi elo ofgeschaaft sinn an duerch rootMargin. Fir Réckkompatibilitéit ze halen, wäerte mir weider e gegebene parséieren offset, rootMarginawer dës Feature gëtt am v6 geläscht .

Methoden

Method	Beschreiwung
`dispose`	Zerstéiert en Element Scrollspy. (läscht gespäichert Daten am DOM Element)
`getInstance`	Statesch Method fir d'Scrollspy Instanz mat engem DOM Element assoziéiert ze kréien.
`getOrCreateInstance`	Statesch Method fir d'Scrollspy Instanz mat engem DOM Element assoziéiert ze kréien oder eng nei ze kreéieren am Fall wou se net initialiséiert gouf.
`refresh`	Wann Dir Elementer an der DOM bäidréit oder ewechhuelt, musst Dir d'Erfrëschungsmethod uruffen.

Hei ass e Beispill mat der Erfrëschungsmethod:

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

Evenementer

Event	Beschreiwung
`activate.bs.scrollspy`	Dëst Event brennt op de Scrollelement wann ëmmer en Anker vum Scrollspy aktivéiert gëtt.

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