Scrollspy nga

Automatiko nga i-update ti nabigasion ti Bootstrap wenno dagiti paset ti grupo ti listaan a naibatay iti posision ti panag-scroll tapno mangipakita no ania a silpo ti agdama nga aktibo iti viewport.

Iti daytoy a panid

No kasano ti panagandar dayta

Ti Scrollspy ket addaan iti sumagmamano a kasapulan tapno umiso ti panagandar:

Masapul nga usaren daytoy iti Bootstrap nav a paset wenno grupo ti listaan .
Ti Scrollspy ket agkasapulan position: relative;iti elemento nga espiaem, kadawyan a ti <body>.
Dagiti angkla ( <a>) ket kasapulan ken masapul nga itudoda ti maysa nga elemento nga addaan iti dayta id.

No sibaballigi a maipatungpal, ti nav wenno grupom ti listaan ket ag-update a maitunos, nga iyakar ti .activeklase manipud iti maysa a banag aginggana iti sumaganad a naibatay kadagiti nainaig a puntiriada.

Mabalin nga i-scroll dagiti container ken keyboard access

No agar-aramidka iti mai-scroll a pagkargaan (malaksid iti <body>), siguraduem nga addaan iti heightset ken overflow-y: scroll;maipakat iti dayta—a kadua ti a tabindex="0"tapno masigurado ti pannakagun-od iti teklado.

I-scroll ti lugar iti baba ti navbar ken buyaen ti aktibo a panagbalbaliw ti klase. Mai-highlight met dagiti dropdown items.

Umuna a paulo

Daytoy ket sumagmamano a linaon ti placeholder para iti panid ti scrollspy. Paliiwenyo ta bayat nga i-scroll-mo ti panid, mai-highlight ti maitutop a link ti nabigasion. Maulit-ulit dayta iti intero a pagarigan ti paset. Itultuloymi ti mangnayon iti sumagmamano pay a pagarigan a kopia ditoy tapno maipaganetget ti panag-scroll ken panangi-highlight.

Maikadua a paulo

Maikatlo a paulo

Maikapat a paulo

Maikalima a paulo

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

Pagarigan ti nested nav

Agtrabaho met ti Scrollspy kadagiti nested .navs. No ti maysa a nested .navket .active, dagiti nagannakna ket agbalinto met a .active. I-scroll ti lugar iti abay ti navbar ken buyaen ti aktibo a panagbalbaliw ti klase.

Item 1

Item 1-1

Item 1-2

Item 2

Item 3

Item 3-1

Item 3-2

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

Pagarigan ti listaan-grupo

Agtrabaho met ti Scrollspy iti .list-groups. I-scroll ti lugar iti abay ti grupo ti listaan ken buyaen ti aktibo a panagbalbaliw ti klase.

Item 1 Item 2 Item 3 Item 4

Item 1

Item 2

Item 3

Item 4

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

Panagusar

Babaen kadagiti attribute ti datos

Tapno nalaka a manginayon ti kababalin ti scrollspy iti nabigasionmo iti topbar, inayon data-bs-spy="scroll"ti elemento a kayatmo nga espia (kaaduan a gagangay a daytoy ket isu koma ti <body>). Kalpasanna inayon ti data-bs-targetattribute nga addaan iti ID wenno klase ti nagannak nga elemento ti ania man a .navpaset ti 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>

Babaen ti JavaScript

Kalpasan ti pananginayon position: relative;iti CSS-mo, tawagam ti scrollspy babaen ti JavaScript:

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

Masapul dagiti masolbar a target ti ID

Dagiti silpo ti Navbar ket masapul nga addaan kadagiti masolbar nga id a puntiria. Kas pagarigan, ti a ket <a href="#home">home</a>masapul a maitunos iti maysa a banag iti DOM a kas ti <div id="home"></div>.

Dagiti saan a makita a puntiria nga elemento ket saan a naikankano

Dagiti puntiria nga elemento a saan a makita ket saan a maikankano ken dagiti maitunos a nav a banagda ket saan a pulos a mai-highlight.

Dagiti Pamay-an

refresh nga

No agus-usar ti scrollspy a maikuyog ti pananginayon wenno panangikkat kadagiti elemento manipud iti DOM, kasapulam nga awagan ti pamay-an ti panagpabaro a kas iti kasta:

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

ibelleng

Dadaelenna ti scrollspy ti maysa nga elemento. (Ikkaten ti naidulin a datos iti elemento ti DOM)

makaala tiInstansia

Estatiko a pamay-an a mangipalubos kenka a makaala ti scrollspy nga instansia a nainaig iti maysa nga elemento ti DOM

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

makaalaWennoAgaramid itiInstansia

Estatiko a pamay-an a mangipalubos kenka a makaala ti scrollspy a pagarigan a nainaig iti maysa nga elemento ti DOM, wenno mangpartuat ti baro no kas pagarigan saan a nairugi

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

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-bs-, a kas iti data-bs-offset="".

Nagan	Tipo	Default	Panangiladawan
`offset`	bilang	`10`	Pixels nga offset manipud iti ngato no kalkularen ti posision ti scroll.
`method`	kuerdas	`auto`	Sapulen no ania a benneg ti ayan ti naespia nga elemento.. `auto`ket mangpili ti kasayaatan a pamay-an tapno makaala kadagiti koordinado ti panag-scroll. `offset`usarento ti `Element.getBoundingClientRect()`pamay-an tapno makaala kadagiti koordinado ti panag-scroll. `position`usarento dagiti tagikua ti `HTMLElement.offsetTop`ken `HTMLElement.offsetLeft`tapno makaala kadagiti koordinado ti panag-scroll.
`target`	kuerdas nga \| jQuery nga banag \| DOM nga elemento		Ikeddeng ti elemento a mangyaplikar ti plugin ti Scrollspy.

Dagiti Pasamak

Kita ti pasamak	Panangiladawan
`activate.bs.scrollspy`	Daytoy a pasamak ket agputok iti elemento ti lukot tunggal ti baro a banag ket agbalin nga aktibo babaen ti scrollspy.

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

Scrollspy nga

No kasano ti panagandar dayta

Mabalin nga i-scroll dagiti container ken keyboard access

Pagarigan iti navbar

Umuna a paulo

Maikadua a paulo

Maikatlo a paulo

Maikapat a paulo

Maikalima a paulo

Pagarigan ti nested nav

Item 1

Item 1-1

Item 1-2

Item 2

Item 3

Item 3-1

Item 3-2

Pagarigan ti listaan-grupo

Item 1

Item 2

Item 3

Item 4

Panagusar

Babaen kadagiti attribute ti datos

Babaen ti JavaScript

Masapul dagiti masolbar a target ti ID

Dagiti saan a makita a puntiria nga elemento ket saan a naikankano

Dagiti Pamay-an

refresh nga

ibelleng

makaala tiInstansia

makaalaWennoAgaramid itiInstansia

Dagiti Pagpilian

Dagiti Pasamak