Bootstrap - Scrollspy: Panduan untuk Pemula

Hai teman-teman pengembang web yang bersemangat! Hari ini, kita akan mendalamkan sebuah fitur menarik di Bootstrap yang disebut Scrollspy. Jangan khawatir jika Anda baru saja memulai berprogram – saya akan mengarahkan Anda melalui topik ini secara langkah demi langkah, sama seperti yang saya lakukan untuk murid-murid saya selama tahun-tahun terakhir. Jadi, ambil secangkir kopi, dan mari kita mulai!

Bootstrap - Scrollspy

Apa Itu Scrollspy?

Sebelum kita masuk ke teknisnya, mari kita pahami apa itu Scrollspy. Bayangkan Anda membaca artikel panjang di online, dan saat Anda menggulir, menu navigasi secara otomatis menyorot bagian yang Anda baca saat ini. Itu Scrollspy dalam aksi! Fitur kecil yang menyenangkan ini meningkatkan pengalaman pengguna dengan memberikan umpan balik visual tentang posisi saat ini pengguna dalam konten.

Bagaimana Kerjanya

Scrollspy bekerja dengan memantau posisi gulir halaman Anda dan memperbarui keadaan aktif item navigasi Anda sesuai dengan itu. Itu seperti memiliki seorang mata-mata kecil (sehingga namanya!) yang memantau di mana Anda berada di halaman dan memberitahu menu navigasi Anda, "Hey, pengguna berada di sini sekarang!"

Mari kita lihat contoh dasar:

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
<div id="navbar-example">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link" href="#section1">Section 1</a></li>
<li class="nav-item"><a class="nav-link" href="#section2">Section 2</a></li>
</ul>
</div>

<div data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="0" tabindex="0">
<h4 id="section1">Section 1</h4>
<p>...</p>
<h4 id="section2">Section 2</h4>
<p>...</p>
</div>
</body>

Dalam contoh ini, kita mengatakan ke Bootstrap untuk memantau posisi gulir (data-bs-spy="scroll") dan memperbarui navigasi di #navbar-example. Saat Anda menggulir melalui konten, item nav yang sesuai akan disorot.

Navbar

Salah satu penggunaan yang paling umum dari Scrollspy adalah dengan navbar. Mari kita lihat contoh yang lebih detil:

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

Dalam contoh ini, kita memiliki navbar dengan dua tautan. Saat Anda menggulir melalui konten, item navbar yang sesuai akan disorot. Itu seperti memiliki GPS untuk halaman Anda!

Navigasi Bertingkat

kadang-kadang, Anda mungkin ingin memiliki item navigasi bertingkat. Scrollspy juga dapat menangani hal itu! Berikut adalah cara:

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

Ini menciptakan struktur navigasi bertingkat yang diperbarui saat Anda menggulir melalui berbagai bagian dan subbagian. Itu seperti memiliki bab dan subbab dalam buku, tetapi interaktif!

List Group

Scrollspy tidak terbatas hanya untuk navbars. Anda juga dapat menggunakannya dengan list groups:

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

Ini menciptakan list group yang diperbarui saat Anda menggulir melalui konten. Itu seperti memiliki daftar isi yang tahu tepat di mana Anda berada dalam buku!

Tautan Sederhana

kadang-kadang, Anda mungkin ingin menggunakan tautan sederhana saja instead of a full navbar or list group:

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#fat">@fat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">@mdo</a>
</li>
</ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0">
<h4 id="fat">@fat</h4>
<p>...</p>
<h4 id="mdo">@mdo</h4>
<p>...</p>
</div>

Ini menciptakan tautan sederhana yang diperbarui saat Anda menggulir. Itu seperti memiliki bookmark di halaman Anda yang menyala saat Anda mencapainya!

Element Tak Terlihat

Scrollspy bahkan dapat bekerja dengan elemen yang awalnya tidak terlihat:

<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="#fat">@fat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">@mdo</a>
</li>
</ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0">
<h4 id="fat">@fat</h4>
<p>...</p>
<h4 id="mdo">@mdo</h4>
<p>...</p>
<h4 id="one">one</h4>
<p>...</p>
<h4 id="two">two</h4>
<p>...</p>
<h4 id="three">three</h4>
<p>...</p>
</div>

<script>
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example2'
})
</script>

Dalam contoh ini, bahkan jika beberapa elemen awalnya tidak terlihat, Scrollspy masih akan bekerja dengan mereka saat mereka masuk ke pandangan. Itu seperti memiliki mata-mata yang dapat melihat melalui tembok!

Penggunaan

Untuk menggunakan Scrollspy, Anda perlu melakukan tiga hal:

Tambahkan data-bs-spy="scroll" ke elemen yang Anda ingin memantau (biasanya <body>).
Tambahkan data-bs-target="#navId" untuk menentukan nav yang akan digunakan untuk scrollspy.
Tambahkan data-bs-offset="" untuk menentukan jumlah pixel yang akan diofsetkan dari atas saat menghitung posisi gulir.

Berikut adalah tabel dari semua atribut data yang Anda dapat gunakan:

Atribut	Deskripsi
data-bs-spy	Mengaktifkan scrollspy
data-bs-target	Menentukan nav yang digunakan untuk scrollspy
data-bs-offset	Pixel untuk diofsetkan dari atas saat menghitung posisi gulir
data-bs-method	Menemukan bagian mana elemen yang dipantau berada

Opsi

Anda juga dapat menginisialisasi Scrollspy dengan JavaScript:

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

Berikut adalah tabel dari semua opsi yang Anda dapat gunakan:

Opsi	Tipe	Default	Deskripsi
offset	number	10	Pixel untuk diofsetkan dari atas saat menghitung posisi gulir
method	string	'auto'	Menemukan bagian mana elemen yang dipantau berada
target	string	''	Menentukan nav yang digunakan untuk scrollspy

Properti CSS

Scrollspy menggunakan beberapa properti CSS untuk melakukan magisnya:

.scrollspy-example {
position: relative;
height: 200px;
margin-top: .5rem;
overflow: auto;
}

Properti position: relative dan overflow: auto adalah krusial bagi Scrollspy untuk bekerja dengan benar.

Dan itu saja! Anda sekarang dilengkapi dengan pengetahuan untuk menggunakan fitur Scrollspy di Bootstrap. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba contoh ini. Selamat coding, dan semoga gulir Anda selalu mulus!

Credits: Image by storyset

Tutorial Sebelumnya:

Bootstrap - Progres

Tutorial Selanjutnya:

Bootstrap - Spinner