Scrollbar-color - Trik CSS

Anonim

The scrollbar-colorproperti mengontrol dua warna scrollbar: yang warna jempol dan warna track . scrollbar-coloradalah bagian dari draf Modul Scrollbars Level 1 Kelompok Kerja CSS, yang masih dalam proses penulisan.

Sebelumnya scrollbar-color, pengembang tidak memiliki cara standar untuk mengubah tampilan default dari bilah gulir browser tanpa harus menyembunyikan bilah gulir melalui overflow: hiddendan merender bilah gulir berbasis JavaScript atau menggunakan atribut bilah gulir yang diawali browser. Dengan scrollbar-color, di sisi lain, kita dapat mengatur gaya bilah gulir agar sesuai dengan desain tanpa harus mengulang fungsionalitas browser atau menggunakan prefiks vendor.

.scrollable-element ( scrollbar-color: red yellow; )
Gunakan warna khusus

scrollbar-colorjuga akan menerima nilai dari darkdan lightuntuk mencocokkan preferensi pengguna jika mereka menggunakan mode gelap di Mac OSX.

.scrollable-element ( scrollbar-color: dark; )

Mulai Maret 2019, dukungan untuk darkdan lightnilai tidak tersedia di browser apa pun. didukung di Firefox. Lihat bagian dukungan browser di bawah untuk detailnya.

Sintaksis

scrollbar-color: auto | dark | light | ;

Nilai

scrollbar-color menerima nilai-nilai berikut:

  • auto adalah nilai default dan akan menampilkan warna scrollbar standar untuk agen pengguna.
  • dark akan memberi tahu agen pengguna untuk menggunakan bilah gulir yang lebih gelap agar cocok dengan skema warna saat ini.
  • light akan memberi tahu agen pengguna untuk menggunakan bilah gulir yang lebih terang agar cocok dengan skema warna saat ini.
  • menentukan dua warna yang akan digunakan untuk scrollbar. Warna pertama adalah untuk “ibu jari” atau bagian scrollbar yang dapat dipindahkan yang muncul di atas. Warna kedua adalah untuk "track" atau bagian tetap dari scrollbar.

Contoh

Ini menggabungkan sintaks spesifikasi baru dan awalan WebKit.

Dukungan Browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

Desktop

Chrome Firefox YAITU Tepi Safari
91 * 87 11 88 * TP *

Ponsel / Tablet

Android Chrome Android Firefox Android iOS Safari
88 * Tidak 81 * 14.0-14.4 *

Terkait

  • scrollbar-gutter
  • scrollbar-width
  • scrollbar

Sumber daya

  • Status Scrollbar Saat Ini
  • Scrollbar Kustom di WebKit
  • Draf Modul Scrollbars CSSWG
  • Kumpulan kasus penggunaan W3C untuk modifikasi scrollbar
  • Masa Depan CSS: Scrollbars pada dev.to
  • Masalah Chromium 891944