Scrollspy

Automātiski atjauniniet Bootstrap navigācijas vai saraksta grupas komponentus, pamatojoties uz ritināšanas pozīciju, lai norādītu, kura saite pašlaik ir aktīva skatvietā.

Šajā lapā

Kā tas strādā

Lai Scrollspy pareizi darbotos, ir jāievēro dažas prasības:

Tas ir jāizmanto Bootstrap navigācijas komponentā vai sarakstu grupā .
Scrollspy pieprasa position: relative;elementu, kuru izspiegojat, parasti <body>.
Enkuri ( <a>) ir nepieciešami, un tiem jānorāda uz elementu ar to id.

Kad tas būs veiksmīgi ieviests, jūsu navigācijas vai sarakstu grupa tiks attiecīgi atjaunināta, pārvietojot .activeklasi no viena vienuma uz nākamo, pamatojoties uz saistītajiem mērķiem.

Ritināmi konteineri un piekļuve tastatūrai

Ja veidojat ritināmu konteineru (izņemot <body>), noteikti tam ir jābūt heightiestatītam un overflow-y: scroll;lietotam kopā ar tabindex="0", lai nodrošinātu piekļuvi tastatūrai.

Ritiniet apgabalu zem navigācijas joslas un skatieties, kā mainās aktīvā klase. Tiks izcelti arī nolaižamās izvēlnes vienumi.

Pirmais virsraksts

Šis ir viettura saturs scrollspy lapai. Ņemiet vērā, ka, ritinot lapu uz leju, tiek iezīmēta atbilstošā navigācijas saite. Tas tiek atkārtots visā komponenta piemērā. Mēs turpinām šeit pievienot vēl dažus piemērus, lai uzsvērtu ritināšanu un izcelšanu.

Otrais virsraksts

Trešā virsraksts

Ceturtā virsraksts

Piektā virsraksts

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

Piemērs ar ligzdotu navigāciju

Scrollspy darbojas arī ar ligzdotiem .navs. Ja ligzdots .navir .active, tā vecāki arī būs .active. Ritiniet apgabalu blakus navigācijas joslai un skatieties, kā mainās aktīvā klase.

1. punkts

1-1

1.-2. punkts

2. punkts

3. punkts

3-1. punkts

3-2. punkts

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

Piemērs ar sarakstu grupu

Scrollspy darbojas arī ar .list-groups. Ritiniet apgabalu blakus saraksta grupai un skatieties aktīvās klases izmaiņas.

1. punkts 2. punkts 3. punkts 4. punkts

1. punkts

2. punkts

3. punkts

4. punkts

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

Lietošana

Izmantojot datu atribūtus

Lai augšējās joslas navigācijai viegli pievienotu scrollspy darbību, pievienojiet data-bs-spy="scroll"elementu, kuru vēlaties izspiegot (parasti tas ir <body>). Pēc tam pievienojiet atribūtu ar jebkura Bootstrap komponenta data-bs-targetvecākelementa ID vai klasi ..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>

Izmantojot JavaScript

Pēc position: relative;CSS pievienošanas izsauciet scrollspy, izmantojot JavaScript:

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

Nepieciešami atrisināmi ID mērķi

Navigācijas joslas saitēm ir jābūt atrisināmiem ID mērķiem. Piemēram, <a href="#home">home</a>ir jāatbilst kaut kam DOM, piemēram, <div id="home"></div>.

Neredzami mērķa elementi ir ignorēti

Mērķa elementi, kas nav redzami, tiks ignorēti, un tiem atbilstošie navigācijas vienumi nekad netiks izcelti.

Metodes

atjaunot

Izmantojot scrollspy kopā ar elementu pievienošanu vai noņemšanu no DOM, jums būs jāizsauc atsvaidzināšanas metode, piemēram:

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

atbrīvoties

Iznīcina elementa scrollspy. (Noņem DOM elementā saglabātos datus)

getInstance

Statiskā metode, kas ļauj iegūt scrollspy gadījumu, kas saistīts ar DOM elementu

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

getOrCreateInstance

Statiskā metode, kas ļauj iegūt scrollspy instanci, kas saistīta ar DOM elementu, vai izveidot jaunu, ja tas nav inicializēts

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

Iespējas

Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-bs-, tāpat kā data-bs-offset="".

Vārds	Tips	Noklusējums	Apraksts
`offset`	numuru	`10`	Pikseļi, kas jānobīda no augšas, aprēķinot ritināšanas pozīciju.
`method`	stīga	`auto`	Atrod, kurā sadaļā atrodas izspiegotais elements. `auto`Tas izvēlēsies labāko metodi ritināšanas koordinātu iegūšanai. `offset`izmantos `Element.getBoundingClientRect()`metodi, lai iegūtu ritināšanas koordinātas. `position`izmantos `HTMLElement.offsetTop`un `HTMLElement.offsetLeft`rekvizītus, lai iegūtu ritināšanas koordinātas.
`target`	stīga \| jQuery objekts \| DOM elements		Norāda elementu, kam lietot spraudni Scrollspy.

Pasākumi

Pasākuma veids	Apraksts
`activate.bs.scrollspy`	Šis notikums tiek aktivizēts ritināšanas elementā ikreiz, kad scrollspy aktivizē jaunu vienumu.

var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})

Scrollspy

Kā tas strādā

Ritināmi konteineri un piekļuve tastatūrai

Piemērs navigācijas joslā

Pirmais virsraksts

Otrais virsraksts

Trešā virsraksts

Ceturtā virsraksts

Piektā virsraksts

Piemērs ar ligzdotu navigāciju

1. punkts

1-1

1.-2. punkts

2. punkts

3. punkts

3-1. punkts

3-2. punkts

Piemērs ar sarakstu grupu

1. punkts

2. punkts

3. punkts

4. punkts

Lietošana

Izmantojot datu atribūtus

Izmantojot JavaScript

Nepieciešami atrisināmi ID mērķi

Neredzami mērķa elementi ir ignorēti

Metodes

atjaunot

atbrīvoties

getInstance

getOrCreateInstance

Iespējas

Pasākumi