Generator Bilah Gulir CSS

Properti standar modern (2023+)

/* Applies to the element that scrolls */
html {
  scrollbar-width: thin;           /* auto | thin | none */
  scrollbar-color: #4f46e5 #e5e7eb; /* thumb track */
}

Dukungan peramban (2024):

• scrollbar-width: Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-color: Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-gutter: stable: Chrome 94+, Safari 14+, Firefox 97+. Menyediakan ruang bilah gulir bahkan saat tidak dibutuhkan, sehingga mencegah pergeseran tata letak.

Pseudo-elemen webkit (Chrome, Safari, Edge versi lama)

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3730a3;
}

Kontrol yang lebih rinci. width mengatur lebar bilah gulir vertikal; height mengatur tinggi bilah gulir horizontal. Tambahkan keduanya untuk kontainer yang bisa digulir ke kedua arah.

Kaskadekan kedua pendekatan

Tentukan aturan modern terlebih dahulu, lalu webkit sebagai peningkatan untuk peramban yang merender keduanya:

.scroll-area {
  scrollbar-width: thin;
  scrollbar-color: #4f46e5 #e5e7eb;
}
.scroll-area::-webkit-scrollbar       { width: 8px; }
.scroll-area::-webkit-scrollbar-track { background: #e5e7eb; }
.scroll-area::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 4px;
  border: 2px solid #e5e7eb;
}

Firefox hanya mematuhi aturan modern scrollbar-*. Chrome dan Safari mematuhi aturan webkit (yang menimpa aturan modern, sehingga perilakunya konsisten).

scrollbar-gutter mencegah pergeseran konten

Tanpa ruang yang dicadangkan, konten menata ulang ketika bilah gulir muncul (umum pada daftar dinamis). Perbaikan:

html { scrollbar-gutter: stable; }
/* or */
html { scrollbar-gutter: stable both-edges; }

Ruang bilah gulir dicadangkan terlepas dari apakah konten digulir atau tidak. both-edges menambahkan ruang yang sepadan di sisi berlawanan agar konten tetap terlihat berada di tengah.

Sembunyikan bilah gulir sepenuhnya

.no-scrollbar {
  scrollbar-width: none;           /* Firefox */
}
.no-scrollbar::-webkit-scrollbar { display: none; }  /* Chrome, Safari */

Hati-hati: menyembunyikan bilah gulir membuat pengguna tidak tahu bahwa konten bisa digulir. Gunakan hanya dengan indikator yang jelas (panah, titik halaman) atau ketika perilaku gulir sudah jelas dari konteks (karosel horizontal, riwayat obrolan).

Pertimbangan untuk perangkat seluler

Di iOS dan Android, bilah gulir hanya muncul sekejap saat menggulir. CSS bilah gulir kustom Anda tetap berlaku, tetapi pengguna mungkin tidak pernah melihatnya lebih dari satu detik. Rancang sesuai kondisi itu: jangan terlalu banyak berinvestasi pada hiasan visual yang jarang tampil.

Aksesibilitas

• Kontras: penggeser terhadap jalur harus memenuhi 3:1 untuk kontras nonteks (WCAG 1.4.11).
• Lebar: bilah gulir yang tipis dapat sulit ditangkap dengan tetikus, terutama bagi pengguna dengan keterbatasan motorik. Lebar normal adalah pengaturan bawaan yang lebih aman.
• Jangan pernah menghapus bilah gulir pada area yang dapat digulir tanpa menyediakan cara menggulir lain. Pengguna yang mengandalkan bilah gulir akan kesulitan.