Skip to main content Skip ad navigationem soUicitudo
in English

Scrollspy

Automatarie renovatio Bootstrap navigationis vel listarum partium secundum librum positionis ad indicandum quae ligatio actuosa est in prospectu.

In hac pagina

Quomodo facitur

Scrollspy pauca habet requisita ad recte operandum;

  • Utendum est in Bootstrap nav componente vel list group .
  • Scrollspy requirit position: relative;elementum explorandi, plerumque <body>.
  • Ancorae <a>requiruntur et elementum cum eo designare debet id.

Cum feliciter perficiatur, coetus tuus nav vel album renovabit proinde, movens .activegenus ab uno ad proximum fundatur in scutis consociatis.

Scrollable continentia et tincidunt accessum

Si vas scrollabile (praeterquam <body>) efficis, fac ut ei appositum heightet overflow-y: scroll;applicatum habeas - e regione tabindex="0"ut accessum claviaturae obtineat.

Exemplum in navbar

Librum aream sub navbare et mutationem classis activae observa. The dropdown items will be highlighted as well.

Primum capite

Hic est aliquis placeholder paginae chartae contentus. Nota quod ut paginam deprimis, apta nexus navigationis illustratur. Per totum exemplum repetitum est. Exempla quaedam plura hic addendo exemplum ad inculcandum scrolling et illustrandum.

Secundo capite

Hic est aliquis placeholder paginae chartae contentus. Nota quod ut paginam deprimis, apta nexus navigationis illustratur. Per totum exemplum repetitum est. Exempla quaedam plura hic addendo exemplum ad inculcandum scrolling et illustrandum.

Tertium caput

Hic est aliquis placeholder paginae chartae contentus. Nota quod ut paginam deprimis, apta nexus navigationis illustratur. Per totum exemplum repetitum est. Exempla quaedam plura hic addendo exemplum ad inculcandum scrolling et illustrandum.

Quartum caput

Hic est aliquis placeholder paginae chartae contentus. Nota quod ut paginam deprimis, apta nexus navigationis illustratur. Per totum exemplum repetitum est. Exempla quaedam plura hic addendo exemplum ad inculcandum scrolling et illustrandum.

Quintus capite

Hic est aliquis placeholder paginae chartae contentus. Nota quod ut paginam deprimis, apta nexus navigationis illustratur. Per totum exemplum repetitum est. Exempla quaedam plura hic addendo exemplum ad inculcandum scrolling et illustrandum.

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

Exemplum cum nested nav

Scrollspy item opera nidos .navs. Si nidos .nav, .activeet parentes ejus erunt .active. Scroll aream navbari proximam et mutationem classis activae speculare.

Item 1

Hic est aliquis placeholder paginae chartae contentus. Nota quod ut paginam deprimis, apta nexus navigationis illustratur. Per totum exemplum repetitum est. Exempla quaedam plura hic addendo exemplum ad inculcandum scrolling et illustrandum.

Item 1-1

Hic est aliquis placeholder paginae chartae contentus. Nota quod ut paginam deprimis, apta nexus navigationis illustratur. Per totum exemplum repetitum est. Exempla quaedam plura hic addendo exemplum ad inculcandum scrolling et illustrandum.

Item 1-2

Hic est aliquis placeholder paginae chartae contentus. Nota quod ut paginam deprimis, apta nexus navigationis illustratur. Per totum exemplum repetitum est. Exempla quaedam plura hic addendo exemplum ad inculcandum scrolling et illustrandum.

Item 2

Hic est aliquis placeholder paginae chartae contentus. Nota quod ut paginam deprimis, apta nexus navigationis illustratur. Per totum exemplum repetitum est. Exempla quaedam plura hic addendo exemplum ad inculcandum scrolling et illustrandum.

Item 3

Hic est aliquis placeholder paginae chartae contentus. Nota quod ut paginam deprimis, apta nexus navigationis illustratur. Per totum exemplum repetitum est. Exempla quaedam plura hic addendo exemplum ad inculcandum scrolling et illustrandum.

Item 3-1

Hic est aliquis placeholder paginae chartae contentus. Nota quod ut paginam deprimis, apta nexus navigationis illustratur. Per totum exemplum repetitum est. Exempla quaedam plura hic addendo exemplum ad inculcandum scrolling et illustrandum.

Item 3-2

Hic est aliquis placeholder paginae chartae contentus. Nota quod ut paginam deprimis, apta nexus navigationis illustratur. Per totum exemplum repetitum est. Exempla quaedam plura hic addendo exemplum ad inculcandum scrolling et illustrandum.

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

Exemplum cum album-group

Scrollspy etiam opera .list-groups. Librum aream iuxta numerum indicem ac mutationem classis activae speculabuntur.

Item 1

Hic est aliquis placeholder paginae chartae contentus. Nota quod ut paginam deprimis, apta nexus navigationis illustratur. Per totum exemplum repetitum est. Exempla quaedam plura hic addendo exemplum ad inculcandum scrolling et illustrandum.

Item 2

Hic est aliquis placeholder paginae chartae contentus. Nota quod ut paginam deprimis, apta nexus navigationis illustratur. Per totum exemplum repetitum est. Exempla quaedam plura hic addendo exemplum ad inculcandum scrolling et illustrandum.

Item 3

Hic est aliquis placeholder paginae chartae contentus. Nota quod ut paginam deprimis, apta nexus navigationis illustratur. Per totum exemplum repetitum est. Exempla quaedam plura hic addendo exemplum ad inculcandum scrolling et illustrandum.

Item 4

Hic est aliquis placeholder paginae chartae contentus. Nota quod ut paginam deprimis, apta nexus navigationis illustratur. Per totum exemplum repetitum est. Exempla quaedam plura hic addendo exemplum ad inculcandum scrolling et illustrandum.

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

Consuetudinem

Via data attributa

Ut facile cartismos mores ad navigationem topbar tuam addas data-bs-spy="scroll", elementum quod vis explorare (plerumque hoc futurum est <body>) adde elementum. Adde data-bs-targetattributum cum ID vel genere elementi parentis alicuius .navcomponentis Bootstrap.

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

His additis position: relative;in CSS, vocate scrollspy per JavaScript:

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

Resolvable ID scuta requiratur

Navbar nexus solvendos id scuta habere debet. Verbi gratia, <a href="#home">home</a>debet respondere alicui simile in DOM <div id="home"></div>.

Non visibilia scopum elementa neglecta sunt

Elementa scopum non visibilia neglecta erunt et earum rerum navalium respondentium numquam illustrabitur.

Methodi

reficite

Cum usu cartis in conjunctione cum addendo vel removendo elementorum e domno, methodum reficiendi similem vocare debes:

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

dispono

Destructio elementi scrollspy. (Recondita removet data in dom elementum)

getInstance

Statica methodus quae te permittit ut in scrollspy instantia coniungatur cum elemento DOM

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

getOrCreateInstance

Statica methodus quae te permittit ut exempli gratia cartis cum elemento DOM coniungitur, vel novum crea in casu non initialized

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

Optiones

Optiones transigi possunt per data attributa vel JavaScript. Data enim attributa, adiungunt optionis nomen data-bs-, ut in data-bs-offset="".

Nomen Type Default Descriptio
offset numerus 10 Elementa ad offset a summo cum positio libri computandi.
method filum auto Quam sectionem elementum exploratum reperit. autooptimam methodum eliget ut librum coordinatarum recipiat. offsetutar Element.getBoundingClientRect()methodo ad coordinatas volumen. positionutar HTMLElement.offsetTopac HTMLElement.offsetLeftpossessiones ad librum coordinatarum.
target string | jQuery object | dom elementum Elementum specificat ut plugin Scrollspy adhibere.

Events

Genus res Descriptio
activate.bs.scrollspy Eventus ille ignes in librum elementi quotiens nova item per scrollspy excitatur. 
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})