in English

Scrollspy

Perbarui navigasi Bootstrap atau daftar komponen grup secara otomatis berdasarkan posisi gulir untuk menunjukkan tautan mana yang saat ini aktif di viewport.

Di halaman ini

Bagaimana itu bekerja

Scrollspy memiliki beberapa persyaratan untuk berfungsi dengan baik:

Itu harus digunakan pada komponen Bootstrap nav atau grup daftar .
Scrollspy membutuhkan position: relative;elemen yang Anda mata-matai, biasanya <body>.
Jangkar ( <a>) diperlukan dan harus menunjuk ke elemen dengan itu id.

Ketika berhasil diterapkan, nav atau grup daftar Anda akan diperbarui sesuai dengan itu, memindahkan .activekelas dari satu item ke item berikutnya berdasarkan target yang terkait.

Wadah yang dapat digulir dan akses keyboard

Jika Anda membuat wadah yang dapat digulir (selain <body>), pastikan untuk memiliki satu heightset dan overflow-y: scroll;menerapkannya—di samping a tabindex="0"untuk memastikan akses keyboard.

Gulir area di bawah bilah navigasi dan perhatikan perubahan kelas yang aktif. Item dropdown juga akan disorot.

Judul pertama

Ini adalah beberapa konten placeholder untuk halaman scrollspy. Perhatikan bahwa saat Anda menggulir halaman ke bawah, tautan navigasi yang sesuai akan disorot. Ini diulang di seluruh contoh komponen. Kami terus menambahkan beberapa salinan contoh di sini untuk menekankan pengguliran dan penyorotan.

Judul kedua

Judul ketiga

Judul keempat

Judul kelima

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

Contoh dengan navigasi bersarang

Scrollspy juga berfungsi dengan .navs bersarang. Jika bersarang .navadalah .active, orang tuanya juga akan .active. Gulir area di sebelah navbar dan perhatikan perubahan kelas yang aktif.

Barang 1

Butir 1-1

Butir 1-2

Butir 2

Butir 3

Butir 3-1

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

Contoh dengan grup daftar

Scrollspy juga bekerja dengan .list-groups. Gulir area di sebelah grup daftar dan perhatikan perubahan kelas yang aktif.

Barang 1 Butir 2 Butir 3 Butir 4

Barang 1

Butir 2

Butir 3

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

Penggunaan

Melalui atribut data

Untuk dengan mudah menambahkan perilaku scrollspy ke navigasi bilah atas Anda, tambahkan data-bs-spy="scroll"ke elemen yang ingin Anda mata-matai (biasanya ini adalah <body>). Kemudian tambahkan data-bs-targetatribut dengan ID atau kelas elemen induk dari setiap .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>

Melalui JavaScript

Setelah menambahkan position: relative;CSS Anda, panggil scrollspy melalui JavaScript:

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

Target ID yang dapat diselesaikan diperlukan

Tautan Navbar harus memiliki target id yang dapat diselesaikan. Misalnya, a <a href="#home">home</a>harus sesuai dengan sesuatu di DOM seperti <div id="home"></div>.

Elemen target yang tidak terlihat diabaikan

Elemen target yang tidak terlihat akan diabaikan dan item navigasi terkaitnya tidak akan pernah disorot.

Metode

menyegarkan

Saat menggunakan scrollspy bersamaan dengan menambahkan atau menghapus elemen dari DOM, Anda harus memanggil metode penyegaran seperti:

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

membuang

Menghancurkan scrollspy elemen. (Menghapus data yang tersimpan pada elemen DOM)

dapatkan Instance

Metode statis yang memungkinkan Anda mendapatkan instance scrollspy yang terkait dengan elemen DOM

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

getOrCreateInstance

Metode statis yang memungkinkan Anda mendapatkan instance scrollspy yang terkait dengan elemen DOM, atau membuat yang baru jika tidak diinisialisasi

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

Pilihan

Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-bs-, seperti pada data-bs-offset="".

Nama	Jenis	Bawaan	Keterangan
`offset`	nomor	`10`	Piksel untuk mengimbangi dari atas saat menghitung posisi gulir.
`method`	rangkaian	`auto`	Menemukan bagian mana elemen mata-mata berada. `auto`Akan memilih metode terbaik untuk mendapatkan koordinat gulir. `offset`akan menggunakan `Element.getBoundingClientRect()`metode untuk mendapatkan koordinat gulir. `position`akan menggunakan properti `HTMLElement.offsetTop`and `HTMLElement.offsetLeft`untuk mendapatkan koordinat gulir.
`target`	string \| objek jQuery \| elemen DOM		Menentukan elemen untuk menerapkan plugin Scrollspy.

Acara

Jenis acara	Keterangan
`activate.bs.scrollspy`	Acara ini diaktifkan pada elemen scroll setiap kali item baru diaktifkan oleh scrollspy.

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

Scrollspy

Bagaimana itu bekerja

Wadah yang dapat digulir dan akses keyboard

Contoh di navbar

Judul pertama

Judul kedua

Judul ketiga

Judul keempat

Judul kelima

Contoh dengan navigasi bersarang

Barang 1

Butir 1-1

Butir 1-2

Butir 2

Butir 3

Butir 3-1

Butir 3-2

Contoh dengan grup daftar

Barang 1

Butir 2

Butir 3

Butir 4

Penggunaan

Melalui atribut data

Melalui JavaScript

Target ID yang dapat diselesaikan diperlukan

Elemen target yang tidak terlihat diabaikan

Metode

menyegarkan

membuang

dapatkan Instance

getOrCreateInstance

Pilihan

Acara