Langkau ke kandungan utama Langkau ke navigasi dokumen
in English

Scrollspy

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

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.

Contoh dalam navbar

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

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 ketiga

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 keempat

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 kelima

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.

<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

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.

Perkara 1-1

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.

Perkara 1-2

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.

Perkara 2

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.

Perkara 3

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.

Perkara 3-1

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.

Perkara 3-2

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.

<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

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.

Perkara 2

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.

Perkara 3

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.

Perkara 4

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.

<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. autoakan memilih kaedah terbaik untuk mendapatkan koordinat tatal. offsetakan menggunakan Element.getBoundingClientRect()kaedah untuk mendapatkan koordinat tatal. positionakan menggunakan sifat HTMLElement.offsetTopdan HTMLElement.offsetLeftuntuk 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...
})