Gaya scroll bar

Gunakan properti scrollbar-width dan scrollbar-color untuk menata scrollbar.

Bramus

Pengantar

Mulai dari Chrome versi 2, scrollbar dapat diberi gaya dengan pseudo-elemen ::-webkit-scrollbar-*. Pendekatan ini berfungsi dengan baik di Chrome dan Safari, tetapi tidak pernah distandardisasi oleh CSS Working Group.

Yang distandardisasi adalah properti scrollbar-width dan scrollbar-color, yang merupakan bagian dari Spesifikasi Modul Penataan Gaya Scrollbar CSS Level 1. Properti ini didukung mulai Chrome 121.

Scroll Bar 101

Anatomi scrollbar

Minimal, scrollbar terdiri dari jalur dan ibu jari. Jalur adalah area tempat ibu jari dapat bergerak. Jalur ini merepresentasikan seluruh jarak scroll. Thumb mewakili posisi saat ini dalam area yang dapat di-scroll. Saat Anda men-scroll, item akan bergerak di dalam jalur. Thumb juga sering dapat ditarik.

Scrollbar dapat memiliki lebih banyak bagian daripada hanya thumb dan jalur. Misalnya, scrollbar dapat memiliki satu atau beberapa tombol untuk menambah atau mengurangi offset scroll. Bagian yang membentuk scrollbar ditentukan oleh sistem operasi yang mendasarinya.

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. Indikator ini tidak ditampilkan secara default, tetapi hanya saat Anda men-scroll secara aktif. Agar konten di bawahnya tetap terlihat, notifikasi ini sering kali dibuat semi-transparan, tetapi hal itu bergantung pada keputusan sistem operasi. Saat berinteraksi dengannya, ukurannya juga dapat bervariasi.

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 mengambil sebagian ruang dari konten yang berdekatan.

Properti scrollbar-color dan scrollbar-width

Memberi warna pada scrollbar dengan scrollbar-color

Properti scrollbar-color memungkinkan Anda mengubah skema warna scrollbar. Properti ini menerima dua nilai <color>. Nilai <color> pertama menentukan warna ibu jari, dan nilai kedua menentukan warna yang akan digunakan untuk jalur.

.scroller {
  scrollbar-color: hotpink blue;
}

Saat menggunakan scrollbar overlay, warna jalur tidak berpengaruh secara default. Namun, saat mengarahkan kursor ke scroll bar, jalur akan ditampilkan.

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 men-scroll.

Nilai yang diterima adalah auto, thin, dan none.

• auto: Lebar scrollbar default sebagaimana disediakan oleh platform.
• thin: Varian scrollbar tipis yang disediakan oleh platform, atau scrollbar kustom yang lebih tipis daripada scrollbar platform default.
• none: Menyembunyikan scrollbar secara efektif. Namun, elemen 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.

Mendukung versi browser yang lebih 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);
    }
}

Perhatikan bahwa saat Anda menyetel width atau height dari ::-webkit-scrollbar, scrollbar overlay akan selalu ditampilkan, sehingga secara efektif mengubahnya menjadi scrollbar klasik.

Untuk mempertahankan ilusi, Anda dapat memilih untuk hanya mengubah warna saat mengarahkan kursor ke penggeser.

.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. */
}