Gå til hovedinnhold Hopp til dokumentnavigering
in English

Scrollspy

Oppdater Bootstrap-navigasjons- eller listegruppekomponenter automatisk basert på rulleposisjon for å indikere hvilken kobling som for øyeblikket er aktiv i visningsporten.

På denne siden

Hvordan det fungerer

Scrollspy har noen krav for å fungere ordentlig:

  • Den må brukes på en Bootstrap nav-komponent eller listegruppe .
  • Scrollspy krever position: relative;på elementet du spionerer på, vanligvis <body>.
  • Ankere ( <a>) er påkrevd og må peke til et element med det id.

Når den er implementert, vil nav- eller listegruppen din oppdateres tilsvarende, og flytte .activeklassen fra ett element til det neste basert på deres tilknyttede mål.

Rullbare beholdere og tastaturtilgang

Hvis du lager en rullbar beholder (annet enn <body>), sørg for å ha et heightsett og overflow-y: scroll;brukt på det – ved siden av en tabindex="0"for å sikre tastaturtilgang.

Eksempel i navbar

Rull området under navigasjonslinjen og se den aktive klassen endre seg. Rullegardinelementene vil også bli uthevet.

Første overskrift

Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.

Andre overskrift

Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.

Tredje overskrift

Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.

Fjerde overskrift

Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.

Femte overskrift

Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.

<nav id="navbar-example2" class="navbar navbar-light bg-light px-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-offset="0" class="scrollspy-example" 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>

Eksempel med nestet nav

Scrollspy fungerer også med nestede .navs. Hvis en nestet .naver .active, vil foreldrene også være .active. Rull området ved siden av navigasjonslinjen og se den aktive klassen endre seg.

Vare 1

Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.

Punkt 1-1

Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.

Punkt 1-2

Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.

Punkt 2

Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.

Punkt 3

Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.

Punkt 3-1

Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.

Punkt 3-2

Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.

<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <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 data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
  <h4 id="item-1">Item 1</h4>
  <p>...</p>
  <h5 id="item-1-1">Item 1-1</h5>
  <p>...</p>
  <h5 id="item-1-2">Item 1-2</h5>
  <p>...</p>
  <h4 id="item-2">Item 2</h4>
  <p>...</p>
  <h4 id="item-3">Item 3</h4>
  <p>...</p>
  <h5 id="item-3-1">Item 3-1</h5>
  <p>...</p>
  <h5 id="item-3-2">Item 3-2</h5>
  <p>...</p>
</div>

Eksempel med liste-gruppe

Scrollspy fungerer også med .list-groups. Rull området ved siden av listegruppen og se den aktive klassen endre seg.

Vare 1

Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.

Punkt 2

Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.

Punkt 3

Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.

Punkt 4

Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.

<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 data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" 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>

Bruk

Via dataattributter

For enkelt å legge til scrollspy-adferd til topplinjenavigasjonen, legg data-bs-spy="scroll"til elementet du vil spionere på (vanligvis vil dette være <body>). Legg deretter til data-bs-targetattributtet med IDen eller klassen til det overordnede elementet til en hvilken som helst Bootstrap- .navkomponent.

body {
  position: relative;
}

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

Via JavaScript

Etter å ha lagt position: relative;til CSS, ring scrollspy via JavaScript:

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

Løsbare ID-mål kreves

Navbar-lenker må ha løsbare id-mål. For eksempel <a href="#home">home</a>må en tilsvare noe i DOM som <div id="home"></div>.

Ikke-synlige målelementer ignorert

Målelementer som ikke er synlige vil bli ignorert, og de tilhørende nav-elementene vil aldri bli uthevet.

Metoder

forfriske

Når du bruker scrollspy i forbindelse med å legge til eller fjerne elementer fra DOM, må du kalle oppdateringsmetoden slik:

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

kaste

Ødelegger et elements rullespion. (Fjerner lagrede data på DOM-elementet)

getInstance

Statisk metode som lar deg få scrollspy-forekomsten knyttet til et DOM-element

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

getOrCreateInstance

Statisk metode som lar deg få scrollspy-forekomsten knyttet til et DOM-element, eller opprette en ny i tilfelle den ikke ble initialisert

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-bs-, som i data-bs-offset="".

Navn Type Misligholde Beskrivelse
offset Antall 10 Piksler for å forskyve fra toppen ved beregning av rulleposisjon.
method streng auto Finner hvilken seksjon det spionerte elementet er i. autovil velge den beste metoden for å få rullekoordinater. offsetvil bruke Element.getBoundingClientRect()metoden for å få rullekoordinater. positionvil bruke egenskapene HTMLElement.offsetTopog HTMLElement.offsetLeftfor å få rullekoordinater.
target streng | jQuery objekt | DOM-element Spesifiserer element for å bruke Scrollspy-plugin.

arrangementer

Hendelsestype Beskrivelse
activate.bs.scrollspy Denne hendelsen utløses på rulleelementet hver gang et nytt element blir aktivert av scrollspionen. 
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})