Gean nei haadynhâld Gean nei dokumintnavigaasje
in English

Scrollspy

Automatysk update Bootstrap-navigaasje of list groepkomponinten basearre op scrollposysje om oan te jaan hokker keppeling op it stuit aktyf is yn 'e viewport.

Op dizze side

Hoe't it wurket

Scrollspy hat in pear easken om goed te funksjonearjen:

  • It moat brûkt wurde op in Bootstrap nav komponint of list groep .
  • Scrollspy fereasket position: relative;op it elemint dat jo bespionearje, meastal de <body>.
  • Ankers ( <a>) binne ferplichte en moatte wize op in elemint mei dat id.

As suksesfol ymplementearre, sil jo nav- of listgroep dienlik bywurkje, en de .activeklasse ferpleatse fan it iene item nei it folgjende basearre op har assosjearre doelen.

Scrollbere konteners en toetseboerd tagong

As jo ​​meitsje in scrollable kontener (oars as de <body>), wês wis dat jo in heightset hawwe en overflow-y: scroll;tapast op it-njonken in tabindex="0"te garandearjen toetseboerd tagong.

Foarbyld yn navbar

Rôlje it gebiet ûnder de navigaasjebalke en besjoch de aktive klasse feroarje. De dropdown-items sille ek markearre wurde.

Earste kop

Dit is wat plakhâlder ynhâld foar de scrollspy side. Tink derom dat as jo de side nei ûnderen rôlje, wurdt de passende navigaasjekeppeling markearre. It wurdt werhelle troch it komponint foarbyld. Wy bliuwe hjir wat mear foarbyldkopie taheakje om it rôljen en markearjen te beklamjen.

Twadde kop

Dit is wat plakhâlder ynhâld foar de scrollspy side. Tink derom dat as jo de side nei ûnderen rôlje, wurdt de passende navigaasjekeppeling markearre. It wurdt werhelle troch it komponint foarbyld. Wy bliuwe hjir wat mear foarbyldkopie taheakje om it rôljen en markearjen te beklamjen.

Tredde kop

Dit is wat plakhâlder ynhâld foar de scrollspy side. Tink derom dat as jo de side nei ûnderen rôlje, wurdt de passende navigaasjekeppeling markearre. It wurdt werhelle troch it komponint foarbyld. Wy bliuwe hjir wat mear foarbyldkopie taheakje om it rôljen en markearjen te beklamjen.

Fjirde kop

Dit is wat plakhâlder ynhâld foar de scrollspy side. Tink derom dat as jo de side nei ûnderen rôlje, wurdt de passende navigaasjekeppeling markearre. It wurdt werhelle troch it komponint foarbyld. Wy bliuwe hjir wat mear foarbyldkopie taheakje om it rôljen en markearjen te beklamjen.

Fyfde kop

Dit is wat plakhâlder ynhâld foar de scrollspy side. Tink derom dat as jo de side nei ûnderen rôlje, wurdt de passende navigaasjekeppeling markearre. It wurdt werhelle troch it komponint foarbyld. Wy bliuwe hjir wat mear foarbyldkopie taheakje om it rôljen en markearjen te beklamjen.

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

Foarbyld mei nested nav

Scrollspy wurket ek mei geneste .navs. As in nêst .navis .active, sille syn âlden ek wêze .active. Rôlje it gebiet neist de navigaasjebalke en besjoch de aktive klasse feroarje.

Artikel 1

Dit is wat plakhâlder ynhâld foar de scrollspy side. Tink derom dat as jo de side nei ûnderen rôlje, wurdt de passende navigaasjekeppeling markearre. It wurdt werhelle troch it komponint foarbyld. Wy bliuwe hjir wat mear foarbyldkopie taheakje om it rôljen en markearjen te beklamjen.

Item 1-1

Dit is wat plakhâlder ynhâld foar de scrollspy side. Tink derom dat as jo de side nei ûnderen rôlje, wurdt de passende navigaasjekeppeling markearre. It wurdt werhelle troch it komponint foarbyld. Wy bliuwe hjir wat mear foarbyldkopie taheakje om it rôljen en markearjen te beklamjen.

Item 1-2

Dit is wat plakhâlder ynhâld foar de scrollspy side. Tink derom dat as jo de side nei ûnderen rôlje, wurdt de passende navigaasjekeppeling markearre. It wurdt werhelle troch it komponint foarbyld. Wy bliuwe hjir wat mear foarbyldkopie taheakje om it rôljen en markearjen te beklamjen.

Artikel 2

Dit is wat plakhâlder ynhâld foar de scrollspy side. Tink derom dat as jo de side nei ûnderen rôlje, wurdt de passende navigaasjekeppeling markearre. It wurdt werhelle troch it komponint foarbyld. Wy bliuwe hjir wat mear foarbyldkopie taheakje om it rôljen en markearjen te beklamjen.

Artikel 3

Dit is wat plakhâlder ynhâld foar de scrollspy side. Tink derom dat as jo de side nei ûnderen rôlje, wurdt de passende navigaasjekeppeling markearre. It wurdt werhelle troch it komponint foarbyld. Wy bliuwe hjir wat mear foarbyldkopie taheakje om it rôljen en markearjen te beklamjen.

Artikel 3-1

Dit is wat plakhâlder ynhâld foar de scrollspy side. Tink derom dat as jo de side nei ûnderen rôlje, wurdt de passende navigaasjekeppeling markearre. It wurdt werhelle troch it komponint foarbyld. Wy bliuwe hjir wat mear foarbyldkopie taheakje om it rôljen en markearjen te beklamjen.

Item 3-2

Dit is wat plakhâlder ynhâld foar de scrollspy side. Tink derom dat as jo de side nei ûnderen rôlje, wurdt de passende navigaasjekeppeling markearre. It wurdt werhelle troch it komponint foarbyld. Wy bliuwe hjir wat mear foarbyldkopie taheakje om it rôljen en markearjen te beklamjen.

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

Foarbyld mei list-groep

Scrollspy wurket ek mei .list-groups. Rôlje it gebiet neist de listgroep en besjoch de aktive klasseferoaring.

Artikel 1

Dit is wat plakhâlder ynhâld foar de scrollspy side. Tink derom dat as jo de side nei ûnderen rôlje, wurdt de passende navigaasjekeppeling markearre. It wurdt werhelle troch it komponint foarbyld. Wy bliuwe hjir wat mear foarbyldkopie taheakje om it rôljen en markearjen te beklamjen.

Artikel 2

Dit is wat plakhâlder ynhâld foar de scrollspy side. Tink derom dat as jo de side nei ûnderen rôlje, wurdt de passende navigaasjekeppeling markearre. It wurdt werhelle troch it komponint foarbyld. Wy bliuwe hjir wat mear foarbyldkopie taheakje om it rôljen en markearjen te beklamjen.

Artikel 3

Dit is wat plakhâlder ynhâld foar de scrollspy side. Tink derom dat as jo de side nei ûnderen rôlje, wurdt de passende navigaasjekeppeling markearre. It wurdt werhelle troch it komponint foarbyld. Wy bliuwe hjir wat mear foarbyldkopie taheakje om it rôljen en markearjen te beklamjen.

Artikel 4

Dit is wat plakhâlder ynhâld foar de scrollspy side. Tink derom dat as jo de side nei ûnderen rôlje, wurdt de passende navigaasjekeppeling markearre. It wurdt werhelle troch it komponint foarbyld. Wy bliuwe hjir wat mear foarbyldkopie taheakje om it rôljen en markearjen te beklamjen.

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

Gebrûk

Fia data attributen

Om maklik scrollspy-gedrach ta te foegjen oan jo topbalke-navigaasje, foegje data-bs-spy="scroll"jo ta oan it elemint wêrop jo wolle bispiede (meast typysk soe dit de <body>). Foegje dan it data-bs-targetattribút ta mei de ID of klasse fan it âlderelemint fan elke Bootstrap .nav-komponint.

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>

Fia JavaScript

Nei it tafoegjen position: relative;fan jo CSS, skilje de scrollspy fia JavaScript:

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

Oplosbere ID-doelen nedich

Navbar-keppelings moatte oplossbere id-doelen hawwe. Bygelyks, in <a href="#home">home</a>moat oerienkomme mei wat yn 'e DOM lykas <div id="home"></div>.

Net-sichtbere doel eleminten negearre

Doeleleminten dy't net sichtber binne, wurde negearre en har byhearrende nav-items sille nea wurde markearre.

Metoaden

opfrisse

By it brûken fan scrollspy yn kombinaasje mei it tafoegjen of ferwiderjen fan eleminten út 'e DOM, moatte jo de ferfarskingsmetoade sa neame:

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

disponearje

Ferneatiget in elemint syn scrollspy. (Ferwidert bewarre gegevens op it DOM-elemint)

getInstance

Statyske metoade wêrmei jo de scrollspy-eksimplaar te krijen assosjearre mei in DOM-elemint

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

getOrCreateInstance

Statyske metoade wêrmei jo de scrollspy-eksimplaar kinne krije dy't assosjeare is mei in DOM-elemint, of in nij oanmeitsje foar it gefal dat it net is inisjalisearre

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

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-bs-, lykas yn data-bs-offset="".

Namme Type Standert Beskriuwing
offset nûmer 10 Pixels om fan boppen ôf te kompensearjen by it berekkenjen fan posysje fan scroll.
method string auto Fynt yn hokker seksje it bispiede elemint is. autosil de bêste metoade kieze om rôlkoordinaten te krijen. offsetsil de Element.getBoundingClientRect()metoade brûke om scrollkoordinaten te krijen. positionsil gebrûk meitsje fan de HTMLElement.offsetTopen HTMLElement.offsetLefteigenskippen te krijen scroll koördinaten.
target string | jQuery objekt | DOM elemint Spesifiseart elemint om Scrollspy-plugin oan te passen.

Eveneminten

Event type Beskriuwing
activate.bs.scrollspy Dit barren ûntspringt op it rôl-elemint as in nij item wurdt aktivearre troch de scrollspy. 
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})