Pereiti prie pagrindinio turinio Pereiti prie dokumentų naršymo
in English

Scrollspy

Automatiškai atnaujinkite Bootstrap naršymą arba sąrašo grupės komponentus pagal slinkties padėtį, kad nurodytumėte, kuri nuoroda šiuo metu aktyvi peržiūros srityje.

Kaip tai veikia

Scrollspy turi keletą reikalavimų, kad tinkamai veiktų:

  • Jis turi būti naudojamas Bootstrap navigacijos komponente arba sąrašo grupėje .
  • Scrollspy reikalauja position: relative;elemento, kurį šnipinėjate, paprastai <body>.
  • Inkarai ( <a>) yra būtini ir turi nurodyti elementą su tuo id.

Sėkmingai įdiegus, jūsų navigacija arba sąrašų grupė bus atitinkamai atnaujinta, perkeliant .activeklasę iš vieno elemento į kitą, atsižvelgiant į susijusius tikslus.

Slenkami konteineriai ir prieiga prie klaviatūros

Jei kuriate slenkamą sudėtinį rodinį (išskyrus <body>), būtinai turėkite heightrinkinį ir overflow-y: scroll;pritaikykite jį kartu su , tabindex="0"kad užtikrintumėte prieigą prie klaviatūros.

Pavyzdys naršymo juostoje

Slinkite po naršymo juosta esančia sritimi ir stebėkite aktyvios klasės pasikeitimą. Išskleidžiamieji elementai taip pat bus paryškinti.

Pirma antraštė

Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.

Antroji antraštė

Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.

Trečia antraštė

Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.

Ketvirta antraštė

Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.

Penkta antraštė

Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.

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

Pavyzdys su įdėtomis navigacijomis

Scrollspy taip pat veikia su įdėtomis .navs. Jei įdėtas .navyra .active, jo tėvai taip pat bus .active. Slinkite šalia naršymo juostos esančia zona ir stebėkite, kaip keičiasi aktyvi klasė.

1 punktas

Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.

1-1 punktas

Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.

1-2 punktas

Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.

2 punktas

Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.

3 punktas

Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.

3-1 punktas

Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.

3-2 punktas

Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.

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

Pavyzdys su sąrašo grupe

Scrollspy taip pat veikia su .list-groups. Slinkite šalia sąrašo grupės esančia sritimi ir stebėkite aktyvios klasės pasikeitimą.

1 punktas

Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.

2 punktas

Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.

3 punktas

Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.

4 punktas

Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.

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

Naudojimas

Per duomenų atributus

Norėdami lengvai pridėti slinkties elgseną prie viršutinės juostos naršymo, pridėkite data-bs-spy="scroll"elementą, kurį norite šnipinėti (dažniausiai tai būtų <body>). Tada pridėkite atributą su bet kurio Bootstrap komponento data-bs-targetpirminio elemento ID arba klase ..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>

Per JavaScript

Pridėję position: relative;CSS, iškvieskite scrollspy naudodami „JavaScript“:

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

Reikalingi išsprendžiami ID tikslai

Naršymo juostos nuorodos turi turėti išsprendžiamus ID tikslus. Pavyzdžiui, <a href="#home">home</a>turi atitikti kažką DOM, pvz ., <div id="home"></div>.

Nepaisoma nematomų tikslinių elementų

Tiksliniai elementai, kurie nematomi, bus ignoruojami, o atitinkami navigacijos elementai niekada nebus paryškinti.

Metodai

atnaujinti

Kai naudojate scrollspy kartu su elementų pridėjimu arba pašalinimu iš DOM, turėsite iškviesti atnaujinimo metodą, pavyzdžiui:

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

disponuoti

Sunaikina elemento slinktį. (Pašalina saugomus duomenis DOM elemente)

getInstance

Statinis metodas, leidžiantis gauti scrollspy egzempliorių, susietą su DOM elementu

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

getOrCreateInstance

Statinis metodas, leidžiantis gauti scrollspy egzempliorių, susietą su DOM elementu, arba sukurti naują, jei jis nebuvo inicijuotas

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

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-bs-, kaip ir data-bs-offset="".

vardas Tipas Numatytas apibūdinimas
offset numerį 10 Pikseliai, skirti nuo viršaus, skaičiuojant slinkties padėtį.
method styga auto Suranda, kurioje skiltyje yra žvalgomasis elementas. Parinks autogeriausią metodą slinkties koordinatėms gauti. offsetnaudos Element.getBoundingClientRect()metodą slinkimo koordinatėms gauti. positionnaudos HTMLElement.offsetTopir HTMLElement.offsetLeftsavybes, kad gautų slinkties koordinates.
target styga | jQuery objektas | DOM elementas Nurodo elementą, kurį reikia taikyti „Scrollspy“ papildiniui.

Renginiai

Renginio tipas apibūdinimas
activate.bs.scrollspy Šis įvykis suaktyvinamas slinkties elemente, kai „scrollspy“ suaktyvina naują elementą.
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})