Mine põhisisu juurde Jätke dokumentide navigeerimise juurde
in English

Scrollspy

Värskendage automaatselt Bootstrapi navigeerimist või loendirühma komponente kerimisasendi alusel, et näidata, milline link on praegu vaateaknas aktiivne.

Kuidas see töötab

Scrollspy'l on nõuetekohaseks toimimiseks mõned nõuded:

  • Seda tuleb kasutada Bootstrapi navigeerimiskomponendis või loendirühmas .
  • Scrollspy nõuab position: relative;elementi, mille järgi luurate, tavaliselt <body>.
  • Ankrud ( <a>) on nõutavad ja peavad osutama sellega elemendile id.

Kui see on edukalt rakendatud, värskendatakse teie navigeerimis- või loendirühma vastavalt, teisaldades .activeklassi ühelt üksuselt teisele vastavalt nendega seotud sihtmärkidele.

Keritavad konteinerid ja juurdepääs klaviatuurile

Kui loote keritava konteineri (v.a <body>), veenduge, et teil oleks heightkomplekt ja overflow-y: scroll;see oleks rakendatud – lisaks klahvile, tabindex="0"et tagada juurdepääs klaviatuurile.

Näide navigeerimisribal

Kerige navigeerimisriba all olevat ala ja vaadake aktiivse klassi muutumist. Samuti tõstetakse esile rippmenüü üksused.

Esimene pealkiri

See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.

Teine pealkiri

See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.

Kolmas pealkiri

See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.

Neljas pealkiri

See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.

Viies pealkiri

See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.

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

Näide pesastatud naviga

Scrollspy töötab ka pesastatud .navs-ga. Kui pesastatud .navon .active, on ka selle vanemad .active. Kerige navigeerimisriba kõrval olevat ala ja vaadake aktiivse klassi muutumist.

1. punkt

See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.

Punkt 1-1

See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.

Punkt 1-2

See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.

2. punkt

See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.

Punkt 3

See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.

Punkt 3-1

See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.

Punkt 3-2

See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.

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

Näide loendirühmaga

Scrollspy töötab ka .list-groups-iga. Kerige loendirühma kõrval olevat ala ja vaadake aktiivse klassi muutumist.

1. punkt

See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.

2. punkt

See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.

Punkt 3

See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.

Punkt 4

See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.

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

Kasutamine

Andmeatribuutide kaudu

Scrollspy käitumise hõlpsaks lisamiseks ülemise riba navigeerimisse lisage data-bs-spy="scroll"element, mida soovite luurata (tavaliselt on see <body>). Seejärel lisage atribuut mis tahes Bootstrapi komponendi data-bs-targetalgelemendi ID või klassiga ..nav

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>

JavaScripti kaudu

Pärast position: relative;CSS-i lisamist kutsuge JavaScripti kaudu scrollspy:

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

Vajalikud on lahendatavad ID sihtmärgid

Navigeerimisriba linkidel peavad olema lahendatavad ID sihtmärgid. Näiteks <a href="#home">home</a>peab vastama millelegi DOM-is nagu <div id="home"></div>.

Mittenähtavaid sihtelemente eirati

Sihtelemente, mis pole nähtavad, ignoreeritakse ja neile vastavaid navigeerimisüksusi ei tõsteta kunagi esile.

meetodid

värskenda

Kui kasutate scrollspy-d koos DOM-i elementide lisamise või eemaldamisega, peate välja kutsuma värskendusmeetodi järgmiselt:

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

käsutada

Hävitab elemendi scrollspy. (Eemaldab DOM-elemendile salvestatud andmed)

getInstance

Staatiline meetod, mis võimaldab teil saada DOM-i elemendiga seotud scrollspy eksemplari

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

getOrCreateInstance

Staatiline meetod, mis võimaldab teil saada DOM-i elemendiga seotud scrollspy eksemplari või luua uue juhuks, kui seda ei lähtestatud

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

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-bs-, nagu data-bs-offset="".

Nimi Tüüp Vaikimisi Kirjeldus
offset number 10 Pikslid nihutamiseks ülevalt kerimise asukoha arvutamisel.
method string auto Otsib, millises jaotises luuratud element asub. autovalib kerimiskoordinaatide hankimiseks parima meetodi. offsetkasutab seda Element.getBoundingClientRect()meetodit kerimiskoordinaatide hankimiseks. positionkasutab kerimiskoordinaatide hankimiseks atribuute ja HTMLElement.offsetTop.HTMLElement.offsetLeft
target string | jQuery objekt | DOM element Määrab elemendi, mida Scrollspy pistikprogrammi rakendada.

Sündmused

Sündmuse tüüp Kirjeldus
activate.bs.scrollspy See sündmus käivitub kerimiselemendil alati, kui scrollspy aktiveerib uue üksuse.
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})