Scrollspy

Ngamutahirkeun otomatis navigasi Bootstrap atanapi daptar komponén grup dumasar kana posisi gulung pikeun nunjukkeun link mana nu ayeuna aktip dina viewport nu.

Dina kaca ieu

Kumaha gawéna

Scrollspy gaduh sababaraha sarat pikeun fungsina leres:

Éta kedah dianggo dina komponén nav Bootstrap atanapi grup daptar .
Scrollspy merlukeun position: relative;unsur nu nuju spionase, biasana dina <body>.
Jangkar ( <a>) diwajibkeun sareng kedah nunjuk ka unsur anu aya id.

Nalika hasil dilaksanakeun, nav Anjeun atawa daptar grup bakal ngamutahirkeun sasuai, pindah .activekelas ti hiji item ka hareup dumasar kana target pakait.

Wadah anu tiasa digulung sareng aksés keyboard

Lamun nuju nyieun wadahna scrollable (lian ti <body>), pastikeun gaduh heightset sarta overflow-y: scroll;dilarapkeun ka dinya-sareng a tabindex="0"mastikeun aksés keyboard.

Gulung wewengkon handap navbar jeung lalajo robah kelas aktip. Item dropdown bakal disorot ogé.

Judul kahiji

Ieu sababaraha eusi pananda tempat pikeun kaca scrollspy. Catet yén nalika anjeun ngagulung ka handap halaman, tautan navigasi anu cocog disorot. Ieu terus-terusan sapanjang conto komponén. Kami terus nambihan sababaraha conto salinan di dieu pikeun ngantebkeun ngagulung sareng nyorot.

Judul kadua

Judul katilu

Judul kaopat

Judul kalima

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

Contona jeung nav nested

Scrollspy ogé jalan kalawan nested .navs. Lamun sarang .navtéh .active, kolotna ogé bakal .active. Gulung wewengkon gigireun navbar jeung lalajo robah kelas aktip.

Barang 1

Item 1-1

Item 1-2

Barang 2

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

Contona jeung daptar-grup

Scrollspy ogé jalan kalawan .list-groups. Gulung wewengkon gigireun grup daptar tur lalajo robah kelas aktip.

Barang 1 Barang 2 Barang 3 barang 4

Barang 1

Barang 2

Barang 3

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

Pamakéan

Via atribut data

Pikeun gampang nambahkeun kabiasaan scrollspy kana navigasi topbar Anjeun, tambahkeun data-bs-spy="scroll"ka elemen rék nénjo dina (paling ilaharna ieu bakal jadi <body>). Teras tambahkeun data-bs-targetatribut sareng ID atanapi kelas unsur indung tina .navkomponén 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>

Ngaliwatan JavaScript

Saatos nambahkeun position: relative;kana CSS anjeun, nelepon scrollspy via JavaScript:

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

target ID resolvable diperlukeun

Tumbu Navbar kudu boga target id resolvable. Contona, hiji <a href="#home">home</a>kudu pakait jeung hal di DOM kawas <div id="home"></div>.

Unsur target anu teu katingali teu dipalire

elemen target nu teu katingali bakal dipaliré jeung item nav saluyu maranéhna bakal pernah disorot.

Métode

nyegerkeun

Nalika nganggo scrollspy sareng nambihan atanapi ngahapus unsur tina DOM, anjeun kedah nyauran metode refresh sapertos kieu:

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

miceun

Ngancurkeun scrollspy unsur urang. (Ngahapus data anu disimpen dina unsur DOM)

getInstance

Metodeu statis anu ngamungkinkeun anjeun kéngingkeun conto scrollspy anu aya hubunganana sareng unsur DOM

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

getOrCreateInstance

Métode statik anu ngamungkinkeun anjeun kéngingkeun conto scrollspy anu aya hubunganana sareng unsur DOM, atanapi ngadamel anu énggal upami henteu diinisialisasi.

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

Pilihan

Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-bs-, sapertos dina data-bs-offset="".

Ngaran	Tipe	Default	Katerangan
`offset`	angka	`10`	Piksel pikeun ngimbangan ti luhur nalika ngitung posisi ngagugulung.
`method`	senar	`auto`	Milarian bagian mana anu aya unsur spied. `auto`Bakal milih metodeu anu pangsaéna pikeun kéngingkeun koordinat ngagulung. `offset`bakal ngagunakeun `Element.getBoundingClientRect()`métode pikeun meunangkeun koordinat ngagugulung. `position`bakal ngagunakeun `HTMLElement.offsetTop`jeung `HTMLElement.offsetLeft`sipat pikeun meunangkeun koordinat ngagugulung.
`target`	string \| objék jQuery \| unsur DOM		Nangtukeun elemen pikeun nerapkeun Scrollspy plugin.

Kajadian

Jenis acara	Katerangan
`activate.bs.scrollspy`	Ieu acara seuneu dina unsur ngagugulung iraha wae hiji item anyar jadi diaktipkeun ku scrollspy nu.

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

Scrollspy

Kumaha gawéna

Wadah anu tiasa digulung sareng aksés keyboard

Contona dina navbar

Judul kahiji

Judul kadua

Judul katilu

Judul kaopat

Judul kalima

Contona jeung nav nested

Barang 1

Item 1-1

Item 1-2

Barang 2

Barang 3

Item 3-1

Item 3-2

Contona jeung daptar-grup

Barang 1

Barang 2

Barang 3

barang 4

Pamakéan

Via atribut data

Ngaliwatan JavaScript

target ID resolvable diperlukeun

Unsur target anu teu katingali teu dipalire

Métode

nyegerkeun

miceun

getInstance

getOrCreateInstance

Pilihan

Kajadian