in English

Scrollspy

Nganyari kanthi otomatis navigasi Bootstrap utawa dhaptar komponen klompok adhedhasar posisi gulung kanggo nunjukake link endi sing lagi aktif ing viewport.

Ing kaca iki

Cara kerjane

Scrollspy duwe sawetara syarat supaya bisa digunakake kanthi bener:

Sampeyan kudu digunakake ing komponen nav Bootstrap utawa grup dhaptar .
Scrollspy mbutuhake position: relative;ing unsur sampeyan spying ing, biasane ing <body>.
Jangkar ( <a>) dibutuhake lan kudu ngarahake menyang unsur sing ana id.

Nalika kasil dileksanakake, nav utawa dhaftar grup bakal nganyari patut, mindhah .activekelas saka siji item kanggo sabanjuré adhedhasar Doel gadhah.

Wadhah sing bisa digulung lan akses keyboard

Yen sampeyan nggawe wadhah sing bisa digulung (liyane saka <body>), priksa manawa sampeyan duwe heightset lan overflow-y: scroll;ditrapake ing jejere tabindex="0"kanggo njamin akses keyboard.

Gulung area ing ngisor navbar lan nonton owah-owahan kelas aktif. Item gulung mudhun uga bakal disorot.

judhul pisanan

Iki sawetara isi placeholder kanggo kaca scrollspy. Elinga yen sampeyan nggulung mudhun kaca, pranala navigasi sing cocog bakal disorot. Dibaleni ing saindhenging conto komponen. Kita terus nambah salinan conto liyane ing kene kanggo nandheske nggulung lan nyorot.

judhul kapindho

judhul katelu

judhul kaping papat

Judhul kaping lima

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

Conto karo nested nav

Scrollspy uga dianggo karo nested .navs. .navYen ana susuh .active, wong tuwane uga .active. Gulung wilayah ing jejere navbar lan nonton owah-owahan kelas aktif.

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>

Conto karo dhaptar-grup

Scrollspy uga dianggo karo .list-groups. Gulung area ing jejere grup dhaptar lan nonton owah-owahan kelas sing aktif.

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>

Panggunaan

Liwat atribut data

Kanggo gampang nambah prilaku scrollspy kanggo pandhu arah topbar, nambah data-bs-spy="scroll"menyang unsur sing pengin Spy (paling biasane iki bakal <body>). Banjur tambahake data-bs-targetatribut karo ID utawa kelas unsur induk saka .navkomponen 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>

Liwat JavaScript

Sawise nambahake position: relative;CSS sampeyan, nelpon scrollspy liwat JavaScript:

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

Target ID sing bisa ditanggulangi dibutuhake

Tautan Navbar kudu duwe target id sing bisa ditanggulangi. Contone, <a href="#home">home</a>kudu cocog karo soko ing DOM kaya <div id="home"></div>.

Unsur target sing ora katon ora digatekake

unsur Doel sing ora katon bakal digatèkaké lan item nav sing cocog ora bakal disorot.

Metode

refresh

Nalika nggunakake scrollspy bebarengan karo nambah utawa mbusak unsur saka DOM, sampeyan kudu nelpon cara refresh kaya mangkene:

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

mbuwang

Ngancurake scrollspy unsur. (Mbusak data sing disimpen ing unsur DOM)

getInstance

Cara statis sing ngidini sampeyan entuk conto scrollspy sing ana gandhengane karo unsur DOM

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

getOrCreateInstance

Cara statis sing ngidini sampeyan entuk conto scrollspy sing ana gandhengane karo unsur DOM, utawa nggawe sing anyar yen ora diwiwiti.

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

Pilihan

Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-bs-, kaya ing data-bs-offset="".

jeneng	Jinis	Default	Katrangan
`offset`	nomer	`10`	Piksel kanggo ngimbangi saka ndhuwur nalika ngetung posisi gulung.
`method`	senar	`auto`	Nemokake bagean sing ana unsur spied. `auto`bakal milih cara sing paling apik kanggo entuk koordinat gulung. `offset`bakal nggunakake `Element.getBoundingClientRect()`cara kanggo njaluk koordinat gulung. `position`bakal nggunakake `HTMLElement.offsetTop`lan `HTMLElement.offsetLeft`properti kanggo njaluk koordinat gulung.
`target`	senar \| obyek jQuery \| unsur DOM		Nemtokake unsur kanggo aplikasi Scrollspy plugin.

Acara

Jenis acara	Katrangan
`activate.bs.scrollspy`	Acara iki murub ing unsur gulung saben item anyar dadi diaktifake dening scrollspy ing.

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

Scrollspy

Cara kerjane

Wadhah sing bisa digulung lan akses keyboard

Conto ing navbar

judhul pisanan

judhul kapindho

judhul katelu

judhul kaping papat

Judhul kaping lima

Conto karo nested nav

Item 1

Item 1-1

Item 1-2

Item 2

Item 3

Item 3-1

Item 3-2

Conto karo dhaptar-grup

Item 1

Item 2

Item 3

Item 4

Panggunaan

Liwat atribut data

Liwat JavaScript

Target ID sing bisa ditanggulangi dibutuhake

Unsur target sing ora katon ora digatekake

Metode

refresh

mbuwang

getInstance

getOrCreateInstance

Pilihan

Acara