Fara í aðalefni Farðu í skjalaleiðsögn
in English

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 hefur nokkrar kröfur til að virka rétt:

  • Það verður að nota á Bootstrap nav íhlut eða listahóp .
  • Scrollspy krefst position: relative;þess þáttar sem þú ert að njósna um, venjulega <body>.
  • Akkeri ( <a>) eru nauðsynleg og verða að benda á þátt með því id.

Þegar innleiðing hefur tekist, mun siglinga- eða listahópurinn þinn uppfæra í samræmi við það og færa .activebekkinn frá einu atriði til annars miðað við tengd markmið þeirra.

Skrunanlegir gámar og lyklaborðsaðgangur

Ef þú ert að búa til flettanlegt gám (annað en <body>), vertu viss um að hafa heightsett og overflow-y: scroll;sett á það - ásamt a tabindex="0"til að tryggja aðgang að lyklaborði.

Dæmi í navbar

Skrunaðu svæðið fyrir neðan siglingastikuna og horfðu á virka bekkinn breytast. Fellilistaratriðin verða einnig auðkennd.

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

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

Þriðja 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.

Fjórða 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.

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

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

Dæmi með hreiðrað 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

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

Liður 1-1

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

Liður 1-2

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

Liður 2

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

Liður 3

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

Liður 3-1

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

Liður 3-2

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

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

Dæmi með lista-hóp

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

Liður 1

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

Liður 2

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

Liður 3

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

Liður 4

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

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

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ð auðkenninu eða flokki móðurþáttar hvers Bootstrap .navíhluta.

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>

Með JavaScript

Eftir að þú hefur bætt position: relative;við CSS skaltu hringja í scrollspy í gegnum JavaScript:

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

Skiljanleg auðkennismarkmið krafist

Navbar tenglar verða að hafa leysanleg auðkennismarkmið. Til dæmis <a href="#home">home</a>verður að samsvara einhverju í DOM eins og <div id="home"></div>.

Ósýnileg markeiningar hunsuð

Markþættir sem eru ekki sýnilegir verða hunsaðir og samsvarandi nav atriði þeirra verða aldrei auðkennd.

Aðferðir

hressa

Þegar þú notar scrollspy í tengslum við að bæta við eða fjarlægja þætti úr DOM þarftu að kalla á endurnýjunaraðferðina svona:

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

farga

Eyðir scrollspy frumefnis. (Fjarlægir vistuð gögn á DOM-einingunni)

getTilvik

Static aðferð sem gerir þér kleift að fá scrollspy tilvikið tengt DOM frumefni

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

getOrCreateInstance

Static aðferð sem gerir þér kleift að fá scrollspy tilvikið tengt DOM frumefni, eða búa til nýjan ef það var ekki frumstillt

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

Valmöguleikar

Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-bs-, eins og í data-bs-offset="".

Nafn Tegund Sjálfgefið Lýsing
offset númer 10 Dílar til að vega upp frá toppi þegar reiknað er út stöðu flettu.
method strengur auto Finnur í hvaða hluta njósnaða þátturinn er. automun velja bestu aðferðina til að fá skrunhnit. offsetmun nota Element.getBoundingClientRect()aðferðina til að fá skrunhnit. positionmun nota eiginleikana HTMLElement.offsetTopog HTMLElement.offsetLefttil að fá skrunhnit.
target strengur | jQuery hlutur | DOM þáttur Tilgreinir þátt til að nota Scrollspy viðbótina.

Viðburðir

Tegund viðburðar Lýsing
activate.bs.scrollspy Þessi atburður kviknar á skrunelementinu í hvert sinn sem nýr hlutur verður virkjaður af scrollspy. 
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})