Panduan untuk CSS - Scrollbars: Untuk Pemula

Hai teman-teman, para ahli desain web masa depan! Hari ini, kita akan mandulkan diri kita ke dunia magis CSS scrollbars. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - saya akan menjadi panduan ramah Anda dalam perjalanan ini, dan pada akhirnya, Anda akan dapat merancang scrollbars seperti seorang ahli!

CSS - Scrollbars

Pengenalan Scrollbars

Sebelum kita masuk ke hal-hal teknis, mari bicarakan tentang apa itu scrollbars. Anda telah melihat mereka setiap hari saat browsing web - mereka adalah batang kecil di sisi atau bagian bawah halaman web yang memungkinkan Anda menggulir ke atas, ke bawah, ke kiri, atau ke kanan ketika ada lebih banyak konten yang tidak bisa muat di layar Anda sekaligus.

Sekarang, bayangkan jika Anda bisa mengayunkan tongkat sihir dan mengubah penampilan scrollbar ini. Well, itu tepatnya apa yang kita akan belajar hari ini dengan CSS!

Cara Merancang Scrollbars?

Merancang scrollbars dengan CSS adalah seperti memberikan halaman web Anda sebuah make-over. Ini adalah cara untuk membuat situs Anda tampak berbeda dan menyediakan pengalaman pengguna yang unik. Mari kita mulai dengan contoh sederhana:

/* Ini diterapkan ke seluruh badan halaman web Anda */
body::-webkit-scrollbar {
width: 12px;               /* lebar seluruh scrollbar */
}

body::-webkit-scrollbar-track {
background: orange;        /* warna area pengikisan */
}

body::-webkit-scrollbar-thumb {
background-color: blue;    /* warna tombol gulir */
border-radius: 20px;       /* roundness tombol gulir */
border: 3px solid orange;  /* membuat padding di sekitar tombol gulir */
}

Dalam contoh ini, kita mengatakan ke browser untuk:

Buat scrollbar 12 pixel lebarnya
Warna area pengikisan (area tempat tombol gulir bergeser) oranye
Buat tombol gulir (bagian yang Anda pegang untuk menggulir) biru
Beri tombol gulir sudut yang bundar
Tambahkan border oranye di sekitar tombol gulir

Cukup keren, kan? Tetapi menunggu, ada yang lainnya!

Pemilih Scrollbar

Untuk merancang scrollbars, kita menggunakan pemilih khusus. Pemikirkan mereka sebagai kata sihir yang memberitahu CSS bagian mana dari scrollbar yang akan diubah. Berikut adalah pemilih utama:

Pemilih	Deskripsi
::-webkit-scrollbar	Merancang seluruh scrollbar
::-webkit-scrollbar-button	Merancang tombol di scrollbar (panah yang menunjuk ke atas dan ke bawah)
::-webkit-scrollbar-track	Merancang track (batang kemajuan) scrollbar
::-webkit-scrollbar-track-piece	Merancang bagian track (batang kemajuan) yang tidak tercakup oleh pegangan
::-webkit-scrollbar-thumb	Merancang tombol gulir yang dapat digeser
::-webkit-scrollbar-corner	Merancang sudut bawah scrollbar, tempat scrollbar horizontal dan vertikal bertemu
::-webkit-resizer	Merancang pegangan perubahan ukuran yang muncul di sudut bawah beberapa elemen

Membuat Scrollbar Khusus

Sekarang kita tahu kata sihir (pemilih) ini, mari buat scrollbar khusus yang menyenangkan:

/* Mari buat scrollbar tema neon! */
.neon-scroll::-webkit-scrollbar {
width: 16px;
}

.neon-scroll::-webkit-scrollbar-track {
background: #000000;
box-shadow: inset 0 0 5px grey;
}

.neon-scroll::-webkit-scrollbar-thumb {
background: linear-gradient(#00ff00, #ff00ff);
border-radius: 10px;
}

.neon-scroll::-webkit-scrollbar-thumb:hover {
background: linear-gradient(#ff00ff, #00ff00);
}

Dalam contoh ini, kita telah membuat scrollbar yang seperti termasuk dalam film cyberpunk! Track nya hitam dengan bayangan dalam, dan tombol gulir nya memiliki gradasi yang berubah saat Anda menggulirinya. Terapkan kelas ini ke setiap elemen dengan overflow, dan lihat keajaiban terjadi!

Merancang CSS Scrollbar

Mari kita pecah proses merancang scrollbar menjadi langkah-langkah:

Pilih target Anda: Decidida jika Anda ingin merancang scrollbar untuk keseluruhan halaman (gunakan body) atau hanya untuk elemen tertentu (gunakan kelas atau ID).
Set lebar: Gunakan pemilih ::-webkit-scrollbar untuk menentukan lebar keseluruhan scrollbar.
Rancang track: Gunakan ::-webkit-scrollbar-track untuk menentukan background, menambahkan bayangan, atau gaya lain ke track.
Rancang tombol gulir: Gunakan ::-webkit-scrollbar-thumb untuk merancang bagian yang dapat digeser dari scrollbar. Ini adalah tempat Anda dapat kreatif dengan warna, gradasi, dan bentuk.
Tambahkan interaktivitas: Gunakan pseudo-class seperti :hover atau :active untuk mengubah penampilan scrollbar saat pengguna berinteraksi dengannya.

Berikut adalah contoh yang menggabungkan semua ini:

.cool-scroll {
height: 300px;
overflow-y: scroll;
}

.cool-scroll::-webkit-scrollbar {
width: 14px;
}

.cool-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}

.cool-scroll::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}

.cool-scroll::-webkit-scrollbar-thumb:hover {
background: #555;
}

Ini membuat scrollbar modern dan ramping untuk setiap elemen dengan kelas cool-scroll. Scrollbar ini sedikit lebih lebar daripada default, memiliki sudut yang bundar, dan pucat saat Anda menggulirinya.

Properti CSS Terkait Scrollbar

Meskipun kita telah fokus pada browser WebKit (seperti Chrome dan Safari), ada beberapa properti CSS standar yang bekerja di berbagai browser. Berikut adalah tabel properti ini:

Properti	Deskripsi
scrollbar-width	Menentukan lebar scrollbar (hanya untuk Firefox)
scrollbar-color	Menentukan warna scrollbar (hanya untuk Firefox)
overflow	Menentukan apa yang harus dilakukan jika konten meluap di dalam kotak elemen
overflow-x	Menentukan apa yang harus dilakukan dengan tepi kiri/kanan konten jika konten meluap area konten elemen
overflow-y	Menentukan apa yang harus dilakukan dengan tepi atas/bawah konten jika konten meluap area konten elemen

Berikut adalah contoh penggunaannya:

/* Untuk Firefox */
* {
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}

/* Untuk browser lain */
*::-webkit-scrollbar {
width: 12px;
}

*::-webkit-scrollbar-track {
background: #f1f1f1;
}

*::-webkit-scrollbar-thumb {
background-color: #888;
}

Kode ini menentukan gaya scrollbar yang konsisten di berbagai browser. Itu ramping, dengan track yang terang dan tombol gulir yang gelap.

Dan itu saja, teman-teman! Anda telah meningkatkan keterampilan CSS Anda dan belajar bagaimana merancang scrollbars. Ingat, dengan kekuatan besar datang tanggung jawab besar - gunakan teknik ini untuk meningkatkan pengalaman pengguna, bukan untuk membuat antarmuka yang mengganggu atau sulit digunakan.

Terus mencoba, terus belajar, dan terutama, bersenang-senang dengannya! Siapa tahu, mungkin tren besar berikutnya dalam desain web adalah scrollbar yang Anda rancang. Selamat coding!

Credits: Image by storyset

Tutorial Sebelumnya:

CSS - Dimensi

Tutorial Selanjutnya:

CSS - Inline Block