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.

Šiame puslapyje

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.

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ė

Trečia antraštė

Ketvirta antraštė

Penkta antraštė

<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

1-1 punktas

1-2 punktas

2 punktas

3 punktas

3-1 punktas

3-2 punktas

<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 2 punktas 3 punktas 4 punktas

1 punktas

2 punktas

3 punktas

4 punktas

<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 `auto`geriausią metodą slinkties koordinatėms gauti. `offset`naudos `Element.getBoundingClientRect()`metodą slinkimo koordinatėms gauti. `position`naudos `HTMLElement.offsetTop`ir `HTMLElement.offsetLeft`savybes, 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...
})

Scrollspy

Kaip tai veikia

Slenkami konteineriai ir prieiga prie klaviatūros

Pavyzdys naršymo juostoje

Pirma antraštė

Antroji antraštė

Trečia antraštė

Ketvirta antraštė

Penkta antraštė

Pavyzdys su įdėtomis navigacijomis

1 punktas

1-1 punktas

1-2 punktas

2 punktas

3 punktas

3-1 punktas

3-2 punktas

Pavyzdys su sąrašo grupe

1 punktas

2 punktas

3 punktas

4 punktas

Naudojimas

Per duomenų atributus

Per JavaScript

Reikalingi išsprendžiami ID tikslai

Nepaisoma nematomų tikslinių elementų

Metodai

atnaujinti

disponuoti

getInstance

getOrCreateInstance

Galimybės

Renginiai