Scrollspy

Kemas kini navigasi Bootstrap secara automatik atau senaraikan komponen kumpulan berdasarkan kedudukan tatal untuk menunjukkan pautan yang sedang aktif dalam port pandang.

Pada halaman ini

Bagaimana ia berfungsi

Scrollspy mempunyai beberapa keperluan untuk berfungsi dengan baik:

Ia mesti digunakan pada komponen nav Bootstrap atau kumpulan senarai .
Scrollspy memerlukan position: relative;elemen yang anda intip, biasanya <body>.
Sauh ( <a>) diperlukan dan mesti menunjuk kepada elemen dengan itu id.

Apabila berjaya dilaksanakan, nav atau kumpulan senarai anda akan dikemas kini dengan sewajarnya, mengalihkan .activekelas dari satu item ke item seterusnya berdasarkan sasaran yang berkaitan.

Bekas boleh tatal dan akses papan kekunci

Jika anda membuat bekas <body>boleh tatal (selain daripada ), pastikan anda mempunyai heightset dan overflow-y: scroll;digunakan padanya—bersama-sama tabindex="0"untuk memastikan akses papan kekunci.

Tatal kawasan di bawah bar navigasi dan lihat perubahan kelas aktif. Item lungsur turun akan diserlahkan juga.

Tajuk pertama

Ini ialah beberapa kandungan pemegang tempat untuk halaman scrollspy. Ambil perhatian bahawa semasa anda menatal ke bawah halaman, pautan navigasi yang sesuai diserlahkan. Ia diulang sepanjang contoh komponen. Kami terus menambah beberapa lagi contoh salinan di sini untuk menekankan penatalan dan penyerlahan.

Tajuk kedua

Tajuk ketiga

Tajuk keempat

Tajuk 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 nav bersarang

Scrollspy juga berfungsi dengan .navs bersarang. Jika bersarang , .navibu .activebapanya juga .active. Tatal kawasan di sebelah bar navigasi dan lihat perubahan kelas aktif.

Perkara 1

Perkara 1-1

Perkara 1-2

Perkara 2

Perkara 3

Perkara 3-1

Perkara 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 kumpulan senarai

Scrollspy juga berfungsi dengan .list-groups. Tatal kawasan di sebelah kumpulan senarai dan tonton perubahan kelas aktif.

Perkara 1 Perkara 2 Perkara 3 Perkara 4

Perkara 1

Perkara 2

Perkara 3

Perkara 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 menambahkan gelagat scrollspy dengan mudah pada navigasi bar atas anda, tambahkan data-bs-spy="scroll"pada elemen yang anda ingin mengintip (kebiasaannya ini ialah <body>). Kemudian tambahkan data-bs-targetatribut dengan ID atau kelas elemen induk bagi mana-mana .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

Selepas menambah position: relative;dalam CSS anda, hubungi scrollspy melalui JavaScript:

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

Sasaran ID boleh diselesaikan diperlukan

Pautan Navbar mesti mempunyai sasaran id yang boleh diselesaikan. Sebagai contoh, <a href="#home">home</a>mesti sepadan dengan sesuatu dalam DOM seperti <div id="home"></div>.

Unsur sasaran tidak kelihatan diabaikan

Elemen sasaran yang tidak kelihatan akan diabaikan dan item nav yang sepadan tidak akan diserlahkan.

Kaedah

segarkan semula

Apabila menggunakan scrollspy bersama-sama dengan menambah atau mengalih keluar elemen daripada DOM, anda perlu memanggil kaedah muat semula seperti:

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

buang

Memusnahkan scrollspy elemen. (Mengalih keluar data yang disimpan pada elemen DOM)

getInstance

Kaedah statik yang membolehkan anda mendapatkan contoh scrollspy yang dikaitkan dengan elemen DOM

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

getOrCreateInstance

Kaedah statik yang membolehkan anda mendapatkan contoh scrollspy yang dikaitkan dengan elemen DOM, atau mencipta yang baharu sekiranya ia tidak dimulakan

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

Pilihan

Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-bs-, seperti dalam data-bs-offset="".

Nama	taip	Lalai	Penerangan
`offset`	nombor	`10`	Piksel untuk mengimbangi dari atas apabila mengira kedudukan tatal.
`method`	tali	`auto`	Mencari bahagian mana elemen intipan berada. `auto`akan memilih kaedah terbaik untuk mendapatkan koordinat tatal. `offset`akan menggunakan `Element.getBoundingClientRect()`kaedah untuk mendapatkan koordinat tatal. `position`akan menggunakan sifat `HTMLElement.offsetTop`dan `HTMLElement.offsetLeft`untuk mendapatkan koordinat tatal.
`target`	rentetan \| objek jQuery \| elemen DOM		Menentukan elemen untuk menggunakan pemalam Scrollspy.

Peristiwa

Jenis acara	Penerangan
`activate.bs.scrollspy`	Peristiwa ini menyala pada elemen skrol apabila item baharu diaktifkan oleh scrollspy.

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

Scrollspy

Bagaimana ia berfungsi

Bekas boleh tatal dan akses papan kekunci

Contoh dalam navbar

Tajuk pertama

Tajuk kedua

Tajuk ketiga

Tajuk keempat

Tajuk kelima

Contoh dengan nav bersarang

Perkara 1

Perkara 1-1

Perkara 1-2

Perkara 2

Perkara 3

Perkara 3-1

Perkara 3-2

Contoh dengan kumpulan senarai

Perkara 1

Perkara 2

Perkara 3

Perkara 4

Penggunaan

Melalui atribut data

Melalui JavaScript

Sasaran ID boleh diselesaikan diperlukan

Unsur sasaran tidak kelihatan diabaikan

Kaedah

segarkan semula

buang

getInstance

getOrCreateInstance

Pilihan

Peristiwa