Scrollspy

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

Sellel lehel

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.

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

Kolmas pealkiri

Neljas pealkiri

Viies pealkiri

<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

Punkt 1-1

Punkt 1-2

2. punkt

Punkt 3

Punkt 3-1

Punkt 3-2

<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 2. punkt Punkt 3 Punkt 4

1. punkt

2. punkt

Punkt 3

Punkt 4

<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. `auto`valib kerimiskoordinaatide hankimiseks parima meetodi. `offset`kasutab seda `Element.getBoundingClientRect()`meetodit kerimiskoordinaatide hankimiseks. `position`kasutab 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...
})

Scrollspy

Kuidas see töötab

Keritavad konteinerid ja juurdepääs klaviatuurile

Näide navigeerimisribal

Esimene pealkiri

Teine pealkiri

Kolmas pealkiri

Neljas pealkiri

Viies pealkiri

Näide pesastatud naviga

1. punkt

Punkt 1-1

Punkt 1-2

2. punkt

Punkt 3

Punkt 3-1

Punkt 3-2

Näide loendirühmaga

1. punkt

2. punkt

Punkt 3

Punkt 4

Kasutamine

Andmeatribuutide kaudu

JavaScripti kaudu

Vajalikud on lahendatavad ID sihtmärgid

Mittenähtavaid sihtelemente eirati

meetodid

värskenda

käsutada

getInstance

getOrCreateInstance

Valikud

Sündmused