Preskoči na glavno vsebino Preskoči na navigacijo po dokumentih
in English

Scrollspy

Samodejno posodobi navigacijo Bootstrap ali komponente skupine seznamov na podlagi položaja drsenja, da pokaže, katera povezava je trenutno aktivna v vidnem polju.

Na tej strani

Kako deluje

Scrollspy ima nekaj zahtev za pravilno delovanje:

  • Uporabiti ga je treba v navigacijski komponenti ali skupini seznamov Bootstrap .
  • Scrollspy zahteva position: relative;element, za katerim vohunite, običajno <body>.
  • Sidra ( <a>) so obvezna in morajo kazati na element s tem id.

Ko bo uspešno izvedena, se bo vaša navigacija ali skupina seznamov ustrezno posodobila in premaknila .activerazred od enega elementa do drugega glede na njihove povezane cilje.

Drsni vsebniki in dostop s tipkovnico

Če izdelujete drsni vsebnik (razen <body>), se prepričajte, da imate heightnabor in overflow-y: scroll;ga uporabite poleg a tabindex="0", da zagotovite dostop s tipkovnico.

Primer v vrstici za krmarjenje

Pomaknite se po območju pod vrstico za krmarjenje in opazujte spremembo aktivnega razreda. Označeni bodo tudi spustni elementi.

Prvi naslov

To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.

Drugi naslov

To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.

Tretji naslov

To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.

Četrti naslov

To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.

Peti naslov

To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.

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

Primer z ugnezdeno nav

Scrollspy deluje tudi z ugnezdenimi .navs. Če je ugnezdeni .nav, .activebodo tudi njegovi starši .active. Pomaknite se po območju poleg vrstice za krmarjenje in opazujte spremembo aktivnega razreda.

Točka 1

To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.

Postavka 1-1

To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.

Točka 1-2

To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.

Točka 2

To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.

Točka 3

To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.

Točka 3-1

To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.

Točka 3-2

To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.

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

Primer s skupino seznamov

Scrollspy deluje tudi s .list-groups. Pomaknite se po območju poleg skupine seznama in opazujte spremembo aktivnega razreda.

Točka 1

To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.

Točka 2

To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.

Točka 3

To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.

Točka 4

To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.

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

Uporaba

Preko podatkovnih atributov

Če želite enostavno dodati vohunsko vedenje v svojo zgornjo vrstico, dodajte data-bs-spy="scroll"element, za katerim želite vohuniti (najpogosteje je to <body>). Nato dodajte data-bs-targetatribut z ID-jem ali razredom nadrejenega elementa katere koli .navkomponente Bootstrap.

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>

Prek JavaScripta

Ko dodate position: relative;svoj CSS, pokličite scrollspy prek JavaScripta:

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

Zahtevani so razrešljivi ID cilji

Povezave vrstice za krmarjenje morajo imeti razločljive cilje ID-ja. Na primer, <a href="#home">home</a>mora ustrezati nečemu v DOM, kot je <div id="home"></div>.

Nevidni ciljni elementi so prezrti

Ciljni elementi, ki niso vidni, bodo prezrti in njihovi ustrezni elementi krmarjenja ne bodo nikoli označeni.

Metode

osveži

Ko uporabljate scrollspy v povezavi z dodajanjem ali odstranjevanjem elementov iz DOM, boste morali poklicati metodo osveževanja takole:

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

odstraniti

Uniči scrollspy elementa. (Odstrani shranjene podatke v elementu DOM)

getInstance

Statična metoda, ki vam omogoča, da dobite primerek scrollspy, povezan z elementom DOM

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

getOrCreateInstance

Statična metoda, ki vam omogoča pridobitev primerka scrollspy, povezanega z elementom DOM, ali ustvarjanje novega, če ni bil inicializiran

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

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-bs-, kot v data-bs-offset="".

Ime Vrsta Privzeto Opis
offset število 10 Slikovne pike za zamik od vrha pri izračunu položaja drsenja.
method vrvica auto Ugotovi, v katerem razdelku je vohunjeni element. Izbere autonajboljši način za pridobitev koordinat drsenja. offsetbo uporabil Element.getBoundingClientRect()metodo za pridobivanje koordinat drsenja. positionbo uporabil lastnosti HTMLElement.offsetTopin HTMLElement.offsetLeftza pridobitev koordinat drsenja.
target niz | jQuery predmet | element DOM Določa element za uporabo vtičnika Scrollspy.

Dogodki

Vrsta dogodka Opis
activate.bs.scrollspy Ta dogodek se sproži na elementu drsenja vsakič, ko scrollspy aktivira nov element. 
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})