Gunakan properti scrollbar-width
dan scrollbar-color
untuk menata gaya scrollbar.
Pengantar
Mulai Chrome versi 2, scroll bar dapat diberi gaya dengan elemen semu ::-webkit-scrollbar-*
. Pendekatan ini berfungsi dengan baik di Chrome dan Safari, tetapi tidak pernah distandarkan oleh CSS Working Group.
Yang distandarisasi adalah properti scrollbar-width
dan scrollbar-color
, bagian dari Spesifikasi Modul Gaya Visual Scrollbar CSS Level 1. Properti ini didukung mulai Chrome 121.
Scrollbar 101
Anatomi scrollbar
Setidaknya scrollbar terdiri dari trek dan thumb. Trek adalah area tempat ibu jari dapat bergerak. Jalur ini mewakili seluruh jarak scroll. Thumbnail mewakili posisi saat ini dalam wilayah yang dapat di-scroll. Saat di-scroll, audio akan bergerak dalam trek. Jempol sering kali juga dapat ditarik.
Namun, scroll bar dapat memiliki lebih banyak bagian dari sekadar thumb dan track. Misalnya, scrollbar dapat memiliki satu atau beberapa tombol untuk menambah atau mengurangi offset scroll. Bagian yang membentuk scrollbar ditentukan oleh sistem operasi yang mendasarinya.
![Ilustrasi bagian-bagian yang membentuk scrollbar.](https://developer.chrome.com/static/docs/css-ui/scrollbar-styling/image/scrollbar-props-1.png?authuser=6&hl=id)
Scrollbar klasik dan overlay
Sebelum melihat cara menata gaya scrollbar, penting untuk memahami perbedaan antara dua jenis scrollbar.
Scroll bar overlay
Scrollbar overlay adalah scrollbar mengambang yang dirender di atas konten di bawahnya. Iklan ini tidak ditampilkan secara default, tetapi hanya saat Anda aktif men-scroll. Untuk menjaga agar konten tetap terlihat, mereka sering kali semi-transparan, tetapi itu tergantung sistem operasi untuk memutuskan. Saat berinteraksi dengan mereka, ukuran mereka mungkin juga bervariasi.
![Ilustrasi browser dengan scrollbar overlay.](https://developer.chrome.com/static/docs/css-ui/scrollbar-styling/image/scrollbar-props-2.png?authuser=6&hl=id)
Scrollbar klasik
Scrollbar klasik adalah scrollbar yang ditempatkan di gutter scrollbar khusus. Gutter scrollbar adalah ruang antara tepi batas dalam dan tepi padding luar. Scrollbar ini biasanya buram (tidak transparan) dan mengurangi ruang dari konten di sampingnya.
![Ilustrasi browser dengan scrollbar klasik.](https://developer.chrome.com/static/docs/css-ui/scrollbar-styling/image/scrollbar-props-3.png?authuser=6&hl=id)
Properti scrollbar-color
dan scrollbar-width
Memberikan warna scroll bar dengan scrollbar-color
Properti scrollbar-color
memungkinkan Anda mengubah skema warna scrollbar. Properti menerima dua nilai <color>
. Nilai <color>
pertama menentukan warna thumb, dan yang kedua menentukan warna yang akan digunakan untuk trek.
.scroller {
scrollbar-color: hotpink blue;
}
Saat menggunakan scrollbar overlay, warna trek tidak berpengaruh secara default. Namun, setelah kursor diarahkan ke scrollbar, trek akan ditampilkan.
scrollbar-color
Untuk menggunakan rendering default yang disediakan oleh sistem operasi, gunakan auto
sebagai nilainya.
Mengubah ukuran scrollbar dengan scrollbar-width
Properti scrollbar-width
memungkinkan Anda memilih scrollbar yang lebih sempit, atau bahkan menyembunyikan scrollbar sepenuhnya tanpa memengaruhi kemampuan scroll.
Nilai yang diterima adalah auto
, thin
, dan none
.
auto
: Lebar scrollbar default seperti yang disediakan oleh platform.thin
: Varian tipis scrollbar yang disediakan oleh platform, atau scrollbar kustom yang lebih tipis dari scrollbar platform default.none
: Menyembunyikan scrollbar secara efektif. Namun, elemen ini masih dapat di-scroll.
<length>
seperti 16px
tidak dapat digunakan sebagai nilai untuk scrollbar-width
.
.scroller {
scrollbar-width: thin;
}
Saat menggunakan scrollbar overlay, thumb hanya digambar saat Anda secara aktif men-scroll area yang dapat di-scroll.
scrollbar-width
Mendukung versi browser lama
Untuk mengakomodasi versi browser yang tidak mendukung scrollbar-color
dan scrollbar-width
, Anda dapat menggunakan properti scrollbar-*
dan ::-webkit-scrollbar-*
yang baru.
.scroller {
--scrollbar-color-thumb: hotpink;
--scrollbar-color-track: blue;
--scrollbar-width: thin;
--scrollbar-width-legacy: 10px;
}
/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
.scroller {
scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
scrollbar-width: var(--scrollbar-width);
}
}
/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
.scroller::-webkit-scrollbar-thumb {
background: var(--scrollbar-color-thumb);
}
.scroller::-webkit-scrollbar-track {
background: var(--scrollbar-color-track);
}
.scroller::-webkit-scrollbar {
max-width: var(--scrollbar-width-legacy);
max-height: var(--scrollbar-width-legacy);
}
}
scrollbar-*
dengan penggantian ke ::-webkit-scrollbar-*
Perhatikan bahwa saat Anda menetapkan width
atau height
dari ::-webkit-scrollbar
, scrollbar overlay akan selalu ditampilkan, yang secara efektif mengubahnya menjadi scrollbar klasik.
Untuk mempertahankan ilusi, Anda dapat memilih untuk hanya mengubah warna saat mengarahkan kursor scroller.
.scroller::-webkit-scrollbar-thumb {
background: transparent;
}
.scroller::-webkit-scrollbar-track {
background: transparent;
}
.scroller:hover::-webkit-scrollbar-thumb {
background: var(--scrollbar-color-thumb);
}
.scroller:hover::-webkit-scrollbar-track {
background: var(--scrollbar-color-track);
}
.scroller:hover {
--fix: ; /* This custom property invalidates styles on hover, thereby enforcing a style recomputation. This is needed to work around a bug in Safari. */
}
scrollbar-*
dengan penggantian ke ::-webkit-scrollbar-*
, hanya menerapkan warna ::-webkit-scrollbar-*
saat kursor diarahkan