Malay

Tutoriel Bootstrap

Mise en page Bootstrap

Contenu Bootstrap

Composants Bootstrap

Bootstrap Formulaires

Aides Bootstrap

Utilitaires Bootstrap

Demos Bootstrap

Bootstrap - Scrollspy: Panduan Pemula

Hai sana, para pengembang web yang bersemangat! Hari ini, kita akan melihat fitur menarik Bootstrap yang disebut Scrollspy. Jangan khawatir jika Anda baru dalam pemrograman - saya akan mengarahkan Anda melalui topik ini secara langkah demi langkah, seperti yang saya lakukan untuk murid-murid saya selama tahun-tahun. Jadi, ambil secangkir kopi, dan mari kita mulai!

Bootstrap - Scrollspy

Apa Itu Scrollspy?

Sebelum kita masuk ke teknisnya, mari kita mengerti 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! Ini adalah fitur kecil yang menarik yang meningkatkan pengalaman pengguna dengan memberikan umpan balik visual tentang posisi saat ini pengguna dalam konten.

Cara 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, "Hai, pengguna sedang 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">Bagian 1</a></li>
<li class="nav-item"><a class="nav-link" href="#section2">Bagian 2</a></li>
</ul>
</div>

<div data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="0" tabindex="0">
<h4 id="section1">Bagian 1</h4>
<p>...</p>
<h4 id="section2">Bagian 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">Pertama</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">Kedua</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">Judul Pertama</h4>
<p>...</p>
<h4 id="scrollspyHeading2">Judul Kedua</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 itu! Ini 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 bagian dan subbagian berbeda. Itu seperti memiliki bab dan subbab dalam buku, tapi interaktif!

Group List

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

<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 group list 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 navbar penuh atau group list:

<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 tidak terlihat awal:

<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 tidak terlihat awal, 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:

  1. Tambahkan data-bs-spy="scroll" ke elemen yang Anda ingin memantau ( biasanya <body>).
  2. Tambahkan data-bs-target="#navId" untuk menentukan nav yang akan digunakan untuk scrollspy.
  3. Tambahkan data-bs-offset="" untuk menentukan piksel untuk offset 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 akan digunakan untuk scrollspy
data-bs-offset Piksel untuk offset dari atas saat menghitung posisi gulir
data-bs-method Menemukan section mana elemen spied 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 Piksel untuk offset dari atas saat menghitung posisi gulir
method string 'auto' Menemukan section mana elemen spied berada
target string '' Menentukan nav yang akan 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 sangat penting bagi Scrollspy untuk bekerja dengan benar.

Dan itu saja! Anda sekarang dilengkapi dengan pengetahuan untuk menggunakan fitur Scrollspy 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 - Baris kemajuan
Tutorial Seterusnya:
Bootstrap - Pemutar