Scrollbar-width - Trik CSS

Anonim

The scrollbar-widthproperti di CSS mengontrol lebar atau “ketebalan” dari scrollbar. scrollbar-widthadalah bagian dari draf Modul Scrollbar Level 1 Kelompok Kerja CSS, yang masih dalam proses. Konsensus pada saat menulis artikel ini scrollbar-widthkemungkinan akan disertakan dalam versi CSS yang akan datang, tetapi ada perdebatan apakah argumen variabel akan diizinkan, atau jika opsi akan dibatasi pada nilai yang telah ditetapkan (lebih lanjut nanti) .

Menyesuaikan lebar bilah gulir sangat penting pada halaman atau antarmuka pengguna dengan ruang terbatas, di mana pemangkasan hanya beberapa piksel dari bilah gulir (atau menghapusnya sama sekali) dapat memberi konten ruang yang cukup untuk bernafas, tanpa menghilangkan kemampuan untuk menggulir.

Sebagai contoh, bayangkan antarmuka pengeditan teks di mana kebutuhan harus sesuai dalam wadah yang pendek dan sempit. Dalam situasi seperti ini, scrollbar dapat menghabiskan banyak ruang yang tersedia:

dengan scrollbar-width: auto;

Dengan scrollbar-width, kita dapat mengatur lebar thinuntuk menghemat ruang:

.scrollable-element ( scrollbar-width: thin; )
textarea dengan scrollbar-width: thin;

Atau, kita dapat mengatur lebar untuk nonemenghapusnya seluruhnya, menghemat lebih banyak ruang (dengan asumsi kita baik-baik saja dengan scrollbar menghilang):

.scrollable-element ( scrollbar-width: none; )
textareadengan scrollbar-width: none;- dan Anda masih dapat menggulir!

Sintaksis

scrollbar-width: auto | thin | none | ;

Nilai

scrollbar-width menerima nilai-nilai berikut:

  • auto adalah nilai default dan akan merender scrollbar standar untuk agen pengguna.
  • thin akan memberi tahu agen pengguna untuk menggunakan scrollbar yang lebih tipis, jika memungkinkan.
  • none akan menyembunyikan bilah gulir sepenuhnya, tanpa memengaruhi kemampuan gulir elemen.
  • sedang diperdebatkan, tetapi (jika ditambahkan) akan menjadi lebar maksimum scrollbar.

Contoh

Dukungan Browser

Ini untuk penyesuaian keseluruhan bilah gulir. Untuk taruhan terbaik Anda dalam menata antar-browser scrollbar, lihat di sini.

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-color
  • scrollbar

Sumber daya

  • Draf Modul Scrollbars CSSWG
  • Kumpulan kasus penggunaan W3C untuk modifikasi scrollbar
  • Masa Depan CSS: Scrollbars pada dev.to
  • w3c Github diskusi tentang kontrol lebar scrollbar