Menyesuaikan warna atau ketebalan scrollbar

Fitur web: scrollbar-color scrollbar-width

Anda dapat menyesuaikan tampilan scrollbar menggunakan properti CSS standar scrollbar-color dan scrollbar-width.

  • scrollbar-color: Menerima dua nilai <color>. Yang pertama berlaku untuk thumb (bagian yang bergerak), dan yang kedua untuk track (latar belakang tetap).
  • scrollbar-width: Menerima auto (default), thin (varian yang lebih tipis), atau none (menyembunyikan scrollbar sepenuhnya sambil mempertahankan kemampuan scroll).

Terapkan scrollbar-color dan scrollbar-width

WAJIB: Gunakan scrollbar-color dan scrollbar-width pada penampung yang dapat di-scroll.

Saat menggunakan scrollbar-color, gunakan variabel CSS untuk memisahkan warna thumb dan track, agar mudah dibaca dan dikelola (terutama saat menggunakan penggantian).

.scroller {
  --scrollbar-thumb: var(--color-neutral-70);
  --scrollbar-track: var(--color-neutral-90);

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

Strategi penggantian

Penggantian & dukungan browser untuk scrollbar-color

Fitur ini adalah progressive enhancement dan tidak selalu memerlukan penggantian.

Jika gaya visual penting dan target Baseline pengguna adalah "Baseline Tersedia Luas" atau yang lebih lama, Anda HARUS menyertakan elemen semu ::-webkit-scrollbar non-standar sebagai pengganti.

Gabungkan penggantian lama dalam blok @supports not (scrollbar-color: auto) untuk mencegah konflik antara properti standar dan pemilih WebKit lama di browser yang mendukung keduanya secara native.

Jika Anda menggunakan properti kustom untuk menentukan warna, properti ini akan otomatis diwariskan ke pemilih WebKit lama. Anda TIDAK perlu menduplikasinya.

/* Legacy fallback for WebKit/Blink browsers */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    /* Must define base size in WebKit for custom colors to be visual */
    width: 12px;
    height: 12px;
  }

  .scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  .scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}