Wiesselt op den Haaptinhalt Wiesselt op d'Docs Navigatioun
in English

Scrollspy

Automatesch Update Bootstrap Navigatioun oder Lëscht Grupp Komponente baséiert op Scroll Positioun fir unzeginn wéi eng Link am Moment aktiv ass am Viewport.

Op dëser Säit

Wéi et funktionnéiert

Scrollspy huet e puer Ufuerderunge fir richteg ze fonktionnéieren:

  • Et muss op engem Bootstrap nav Komponent oder Lëscht Grupp benotzt ginn .
  • Scrollspy verlaangt position: relative;op d'Element Dir Spioun op, normalerweis der <body>.
  • Anker ( <a>) sinn erfuerderlech a mussen op en Element mat deem weisen id.

Wann erfollegräich ëmgesat, wäert Är nav oder Lëscht Grupp deementspriechend Aktualiséierung opgetrueden, réckelen der .activeKlass vun engem Element op déi nächst baséiert op hir assoziéiert Ziler.

Scrollbar Container a Keyboard Zougang

Wann Dir e scrollable Container maacht (ausser den <body>), gitt sécher datt Dir e heightSet hutt an overflow-y: scroll;op et applizéiert - nieft engem tabindex="0"fir Tastatur Zougang ze garantéieren.

Beispill an navbar

Scroll d'Gebitt ënner der Navbar a kuckt d'aktiv Klass änneren. D'Dropdown-Elementer ginn och markéiert.

Éischt Rubrik

Dëst ass e puer Plazhalter Inhalt fir d'Scrollspy Säit. Notéiert datt wann Dir op d'Säit scrollt, gëtt de passende Navigatiounslink markéiert. Et gëtt am ganze Komponent Beispill widderholl. Mir addéiere weider e puer Beispillkopie hei fir d'Scrollen an d'Highlighten ze ënnersträichen.

Zweet Rubrik

Dëst ass e puer Plazhalter Inhalt fir d'Scrollspy Säit. Notéiert datt wann Dir op d'Säit scrollt, gëtt de passende Navigatiounslink markéiert. Et gëtt am ganze Komponent Beispill widderholl. Mir addéiere weider e puer Beispillkopie hei fir d'Scrollen an d'Highlighten ze ënnersträichen.

Drëtt Rubrik

Dëst ass e puer Plazhalter Inhalt fir d'Scrollspy Säit. Notéiert datt wann Dir op d'Säit scrollt, gëtt de passende Navigatiounslink markéiert. Et gëtt am ganze Komponent Beispill widderholl. Mir addéiere weider e puer Beispillkopie hei fir d'Scrollen an d'Highlighten ze ënnersträichen.

Véiert Rubrik

Dëst ass e puer Plazhalter Inhalt fir d'Scrollspy Säit. Notéiert datt wann Dir op d'Säit scrollt, gëtt de passende Navigatiounslink markéiert. Et gëtt am ganze Komponent Beispill widderholl. Mir addéiere weider e puer Beispillkopie hei fir d'Scrollen an d'Highlighten ze ënnersträichen.

Fënneften Rubrik

Dëst ass e puer Plazhalter Inhalt fir d'Scrollspy Säit. Notéiert datt wann Dir op d'Säit scrollt, gëtt de passende Navigatiounslink markéiert. Et gëtt am ganze Komponent Beispill widderholl. Mir addéiere weider e puer Beispillkopie hei fir d'Scrollen an d'Highlighten ze ënnersträichen.

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

Beispill mat Nested nav

Scrollspy Wierker och mat nested .navs. Wann e Nest .navass .active, wäerten seng Elteren och .active. Scroll d'Gebitt nieft der Navbar a kuckt d'aktiv Klass änneren.

Artikel 1

Dëst ass e puer Plazhalter Inhalt fir d'Scrollspy Säit. Notéiert datt wann Dir op d'Säit scrollt, gëtt de passende Navigatiounslink markéiert. Et gëtt am ganze Komponent Beispill widderholl. Mir addéiere weider e puer Beispillkopie hei fir d'Scrollen an d'Highlighten ze ënnersträichen.

Punkt 1-1

Dëst ass e puer Plazhalter Inhalt fir d'Scrollspy Säit. Notéiert datt wann Dir op d'Säit scrollt, gëtt de passende Navigatiounslink markéiert. Et gëtt am ganze Komponent Beispill widderholl. Mir addéiere weider e puer Beispillkopie hei fir d'Scrollen an d'Highlighten ze ënnersträichen.

Punkt 1-2

Dëst ass e puer Plazhalter Inhalt fir d'Scrollspy Säit. Notéiert datt wann Dir op d'Säit scrollt, gëtt de passende Navigatiounslink markéiert. Et gëtt am ganze Komponent Beispill widderholl. Mir addéiere weider e puer Beispillkopie hei fir d'Scrollen an d'Highlighten ze ënnersträichen.

Artikel 2

Dëst ass e puer Plazhalter Inhalt fir d'Scrollspy Säit. Notéiert datt wann Dir op d'Säit scrollt, gëtt de passende Navigatiounslink markéiert. Et gëtt am ganze Komponent Beispill widderholl. Mir addéiere weider e puer Beispillkopie hei fir d'Scrollen an d'Highlighten ze ënnersträichen.

Artikel 3

Dëst ass e puer Plazhalter Inhalt fir d'Scrollspy Säit. Notéiert datt wann Dir op d'Säit scrollt, gëtt de passende Navigatiounslink markéiert. Et gëtt am ganze Komponent Beispill widderholl. Mir addéiere weider e puer Beispillkopie hei fir d'Scrollen an d'Highlighten ze ënnersträichen.

Punkt 3-1

Dëst ass e puer Plazhalter Inhalt fir d'Scrollspy Säit. Notéiert datt wann Dir op d'Säit scrollt, gëtt de passende Navigatiounslink markéiert. Et gëtt am ganze Komponent Beispill widderholl. Mir addéiere weider e puer Beispillkopie hei fir d'Scrollen an d'Highlighten ze ënnersträichen.

Punkt 3-2

Dëst ass e puer Plazhalter Inhalt fir d'Scrollspy Säit. Notéiert datt wann Dir op d'Säit scrollt, gëtt de passende Navigatiounslink markéiert. Et gëtt am ganze Komponent Beispill widderholl. Mir addéiere weider e puer Beispillkopie hei fir d'Scrollen an d'Highlighten ze ënnersträichen.

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

Beispill mat Lëscht-Grupp

Scrollspy Wierker och mat .list-groups. Scroll de Beräich nieft der Lëscht Grupp a kuckt déi aktiv Klass änneren.

Artikel 1

Dëst ass e puer Plazhalter Inhalt fir d'Scrollspy Säit. Notéiert datt wann Dir op d'Säit scrollt, gëtt de passende Navigatiounslink markéiert. Et gëtt am ganze Komponent Beispill widderholl. Mir addéiere weider e puer Beispillkopie hei fir d'Scrollen an d'Highlighten ze ënnersträichen.

Artikel 2

Dëst ass e puer Plazhalter Inhalt fir d'Scrollspy Säit. Notéiert datt wann Dir op d'Säit scrollt, gëtt de passende Navigatiounslink markéiert. Et gëtt am ganze Komponent Beispill widderholl. Mir addéiere weider e puer Beispillkopie hei fir d'Scrollen an d'Highlighten ze ënnersträichen.

Artikel 3

Dëst ass e puer Plazhalter Inhalt fir d'Scrollspy Säit. Notéiert datt wann Dir op d'Säit scrollt, gëtt de passende Navigatiounslink markéiert. Et gëtt am ganze Komponent Beispill widderholl. Mir addéiere weider e puer Beispillkopie hei fir d'Scrollen an d'Highlighten ze ënnersträichen.

Artikel 4

Dëst ass e puer Plazhalter Inhalt fir d'Scrollspy Säit. Notéiert datt wann Dir op d'Säit scrollt, gëtt de passende Navigatiounslink markéiert. Et gëtt am ganze Komponent Beispill widderholl. Mir addéiere weider e puer Beispillkopie hei fir d'Scrollen an d'Highlighten ze ënnersträichen.

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

Benotzung

Via daten Attributer

Fir einfach scrollspy Verhalen op Är Topbar Navigatioun ze addéieren data-bs-spy="scroll", füügt d'Element un op déi Dir wëllt spionéieren (meeschtens wier dëst de <body>). Füügt dann den data-bs-targetAttribut mat der ID oder der Klass vum Elterendeel vun all Bootstrap .navKomponent un.

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>

Iwwer JavaScript

Nodeems Dir position: relative;Är CSS bäigefüügt hutt, rufft de Scrollspy iwwer JavaScript:

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

Opléisbar ID Ziler erfuerderlech

Navbar Linken mussen opléisbar ID Ziler hunn. Zum Beispill, e <a href="#home">home</a>Must entsprécht eppes an der DOM wéi <div id="home"></div>.

Net siichtbar Zilelementer ignoréiert

Zil Elementer déi net siichtbar sinn ignoréiert ginn an hir entspriechend nav Elementer wäert ni beliicht ginn.

Methoden

erfrëschen

Wann Dir Scrollspy benotzt a Verbindung mat der Zousatz oder Ewechhuele vun Elementer aus der DOM, musst Dir d'Erfrëschungsmethod sou nennen:

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

entsuergen

Zerstéiert en Element Scrollspy. (läscht gespäichert Daten am DOM Element)

getInstanz

Statesch Method déi Iech erlaabt d'Scrollspy Instanz mat engem DOM Element assoziéiert ze kréien

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

getOrCreateInstance

Statesch Method déi Iech erlaabt d'Scrollspy Instanz mat engem DOM Element assoziéiert ze kréien, oder eng nei ze kreéieren am Fall wou se net initialiséiert gouf

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

Optiounen

Optiounen kënnen iwwer Datenattributer oder JavaScript weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-bs-, wéi an data-bs-offset="".

Numm Typ Default Beschreiwung
offset Zuel 10 Pixel fir vun uewen ze kompenséieren wann Dir d'Positioun vun der Scroll berechnen.
method String auto Fannt an wéi eng Sektioun de spionéierten Element ass. autowäert déi bescht Method wielen fir Scroll Koordinaten ze kréien. offsetwäert d' Element.getBoundingClientRect()Methode benotzen fir Scroll Koordinaten ze kréien. positionwäert d' HTMLElement.offsetTopan HTMLElement.offsetLeftEegeschafte benotzen fir Scroll Koordinaten ze kréien.
target streng | jQuery Objet | DOM Element Spezifizéiert Element fir Scrollspy Plugin z'applizéieren.

Evenementer

Event Typ Beschreiwung
activate.bs.scrollspy Dëst Evenement brennt op de Scroll Element wann en neit Element vum Scrollspy aktivéiert gëtt. 
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})