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 ituid
.
Apabila berjaya dilaksanakan, nav atau kumpulan senarai anda akan dikemas kini dengan sewajarnya, mengalihkan .active
kelas 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 height
set 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 .nav
s bersarang. Jika bersarang , .nav
ibu .active
bapanya 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-group
s. 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-target
atribut dengan ID atau kelas elemen induk bagi mana-mana .nav
komponen 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...
})