Slaan oor na hoofinhoud Slaan oor na dokumentnavigasie
in English

Scrollspy

Dateer Bootstrap-navigasie of lys groepkomponente outomaties op gebaseer op rolposisie om aan te dui watter skakel tans aktief is in die viewport.

Op hierdie bladsy

Hoe dit werk

Scrollspy het 'n paar vereistes om behoorlik te funksioneer:

  • Dit moet op 'n Bootstrap nav-komponent of lysgroep gebruik word .
  • Scrollspy vereis position: relative;op die element waarop jy spioeneer, gewoonlik die <body>.
  • Ankers ( <a>) word vereis en moet na 'n element daarmee wys id.

Wanneer dit suksesvol geïmplementeer is, sal jou navigasie- of lysgroep dienooreenkomstig opdateer en die .activeklas van een item na die volgende skuif op grond van hul verwante teikens.

Rolbare houers en sleutelbordtoegang

As jy 'n blaaibare houer maak (behalwe die <body>), maak seker dat jy 'n heightstel het en daarop overflow-y: scroll;toegepas word—langs 'n tabindex="0"om sleutelbordtoegang te verseker.

Voorbeeld in navbar

Blaai deur die area onder die navigasiebalk en kyk hoe die aktiewe klas verander. Die aftrek-items sal ook uitgelig word.

Eerste opskrif

Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.

Tweede opskrif

Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.

Derde opskrif

Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.

Vierde opskrif

Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.

Vyfde opskrif

Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.

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

Voorbeeld met geneste nav

Scrollspy werk ook met geneste .navs. As 'n geneste .navis .active, sal sy ouers ook wees .active. Blaai deur die area langs die navigasiebalk en kyk hoe die aktiewe klas verander.

Item 1

Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.

Item 1-1

Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.

Item 1-2

Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.

Item 2

Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.

Item 3

Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.

Item 3-1

Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.

Item 3-2

Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.

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

Voorbeeld met lys-groep

Scrollspy werk ook met .list-groups. Blaai deur die area langs die lysgroep en kyk hoe die aktiewe klas verander.

Item 1

Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.

Item 2

Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.

Item 3

Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.

Item 4

Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.

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

Gebruik

Via data-eienskappe

Om maklik scrollspy-gedrag by jou bobalknavigasie te voeg, voeg data-bs-spy="scroll"by die element waarop jy wil spioeneer (meestal sal dit die <body>). Voeg dan die data-bs-targetkenmerk by met die ID of klas van die ouerelement van enige Bootstrap- .navkomponent.

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>

Via JavaScript

Nadat u position: relative;u CSS bygevoeg het, skakel die scrollspy via JavaScript:

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

Oplosbare ID-teikens word vereis

Navbar-skakels moet oplosbare ID-teikens hê. Byvoorbeeld, 'n <a href="#home">home</a>moet ooreenstem met iets in die DOM soos <div id="home"></div>.

Nie-sigbare teikenelemente geïgnoreer

Teikenelemente wat nie sigbaar is nie, sal geïgnoreer word en hul ooreenstemmende navigasie-items sal nooit uitgelig word nie.

Metodes

verfris

Wanneer jy scrollspy gebruik in samewerking met die byvoeging of verwydering van elemente uit die DOM, moet jy die herlaaimetode soos volg noem:

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

wegdoen

Vernietig 'n element se scrollspy. (Verwyder gestoorde data op die DOM-element)

getInstance

Statiese metode waarmee u die scrollspy-instansie kan kry wat met 'n DOM-element geassosieer word

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

getOrCreateInstance

Statiese metode wat jou toelaat om die scrollspy-instansie te kry wat met 'n DOM-element geassosieer word, of 'n nuwe een te skep ingeval dit nie geïnisialiseer is nie

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

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-bs-, soos in data-bs-offset="".

Naam Tik Verstek Beskrywing
offset nommer 10 Pixels om van bo af te verreken wanneer die posisie van rolberekening bereken word.
method string auto Vind in watter afdeling die gespioeneerde element is. autosal die beste metode kies om rolkoördinate te kry. offsetsal die Element.getBoundingClientRect()metode gebruik om rolkoördinate te kry. positionsal die HTMLElement.offsetTopen HTMLElement.offsetLefteienskappe gebruik om rolkoördinate te kry.
target tou | jQuery voorwerp | DOM element Spesifiseer element om Scrollspy-inprop toe te pas.

Gebeurtenisse

Soort gebeurtenis Beskrywing
activate.bs.scrollspy Hierdie gebeurtenis brand op die rolelement wanneer 'n nuwe item deur die rolspioen geaktiveer word. 
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})