Spring til hovedindhold Spring til dokumentnavigation
in English

Scrollspy

Opdater automatisk Bootstrap-navigation eller listegruppekomponenter baseret på rulleposition for at angive, hvilket link der i øjeblikket er aktivt i visningsporten.

På denne side

Hvordan det virker

Scrollspy har et par krav for at fungere korrekt:

  • Det skal bruges på en Bootstrap nav-komponent eller listegruppe .
  • Scrollspy kræver position: relative;det element, du spionerer på, normalt <body>.
  • Ankre ( <a>) er påkrævet og skal pege på et element med det id.

Når den er implementeret, opdateres din nav- eller listegruppe i overensstemmelse hermed og flytter .activeklassen fra det ene element til det næste baseret på deres tilknyttede mål.

Rulbare containere og tastaturadgang

Hvis du laver en rulbar beholder (andre end <body>), skal du sørge for at have et heightsæt og overflow-y: scroll;anvendt på det – ved siden af ​​en tabindex="0"for at sikre tastaturadgang.

Eksempel i navbar

Rul området under navigeringslinjen og se den aktive klasse ændre sig. Rullemenupunkterne vil også blive fremhævet.

Første overskrift

Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksemplarer her for at understrege rulningen og fremhævelsen.

Anden overskrift

Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksemplarer her for at understrege rulningen og fremhævelsen.

Tredje overskrift

Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksemplarer her for at understrege rulningen og fremhævelsen.

Fjerde overskrift

Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksemplarer her for at understrege rulningen og fremhævelsen.

Femte overskrift

Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksemplarer her for at understrege rulningen og fremhævelsen.

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

Scrollspy fungerer også med indlejrede .navs. Hvis en indlejret .naver .active, vil dens forældre også være .active. Rul gennem området ved siden af ​​navigeringslinjen, og se den aktive klasse ændre sig.

Punkt 1

Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksemplarer her for at understrege rulningen og fremhævelsen.

Punkt 1-1

Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksemplarer her for at understrege rulningen og fremhævelsen.

Punkt 1-2

Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksemplarer her for at understrege rulningen og fremhævelsen.

Punkt 2

Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksemplarer her for at understrege rulningen og fremhævelsen.

Punkt 3

Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksemplarer her for at understrege rulningen og fremhævelsen.

Punkt 3-1

Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksemplarer her for at understrege rulningen og fremhævelsen.

Punkt 3-2

Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksemplarer her for at understrege rulningen og fremhævelsen.

<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. Rul i området ved siden af ​​listegruppen, og se den aktive klasse ændre sig.

Punkt 1

Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksemplarer her for at understrege rulningen og fremhævelsen.

Punkt 2

Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksemplarer her for at understrege rulningen og fremhævelsen.

Punkt 3

Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksemplarer her for at understrege rulningen og fremhævelsen.

Punkt 4

Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksemplarer her for at understrege rulningen og fremhævelsen.

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

Brug

Via dataattributter

For nemt at tilføje scrollspy-adfærd til din topbjælke-navigation, skal du tilføje data-bs-spy="scroll"til det element, du vil spionere på (det vil oftest være <body>). Tilføj derefter data-bs-targetattributten med ID'et eller klassen for det overordnede element for enhver 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

Efter at have tilføjet position: relative;din CSS, ring til scrollspy via JavaScript:

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

Opløselige ID-mål påkrævet

Navbar-links skal have opløselige id-mål. For eksempel skal et <a href="#home">home</a>svar svare til noget i DOM som <div id="home"></div>.

Ikke-synlige målelementer ignoreret

Målelementer, der ikke er synlige, vil blive ignoreret, og deres tilsvarende nav-elementer vil aldrig blive fremhævet.

Metoder

Opdater

Når du bruger scrollspy i forbindelse med tilføjelse eller fjernelse af elementer fra DOM, skal du kalde opdateringsmetoden sådan:

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

bortskaffe

Ødelægger et elements scrollspy. (Fjerner gemte data på DOM-elementet)

getInstance

Statisk metode, som giver dig mulighed for at få scrollspy-forekomsten forbundet med et DOM-element

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

getOrCreateInstance

Statisk metode, som giver dig mulighed for at få scrollspy-forekomsten tilknyttet et DOM-element eller oprette en ny, hvis den ikke blev initialiseret

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

Muligheder

Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-bs-, som i data-bs-offset="".

Navn Type Standard Beskrivelse
offset nummer 10 Pixels til forskydning fra toppen ved beregning af rulleposition.
method snor auto Finder hvilken sektion det spionerede element er i. autovil vælge den bedste metode til at få scroll-koordinater. offsetvil bruge Element.getBoundingClientRect()metoden til at få rullekoordinater. positionvil bruge egenskaberne HTMLElement.offsetTopog HTMLElement.offsetLefttil at få rullekoordinater.
target streng | jQuery objekt | DOM element Angiver element til at anvende Scrollspy plugin.

Begivenheder

Begivenhedstype Beskrivelse
activate.bs.scrollspy Denne hændelse udløses på rulleelementet, når et nyt element bliver aktiveret af scrollspyen. 
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})