Lebar tatal - Trik CSS

Anonim

The scrollbar-widthharta di CSS mengawal lebar atau "ketebalan" daripada scrollbar a. scrollbar-widthadalah sebahagian daripada draf Modul Skrolbars Kumpulan Kerja CSS Tahap 1, yang masih dalam proses. Konsensus pada saat penulisan artikel ini scrollbar-widthadalah kemungkinan akan dimasukkan dalam versi CSS yang akan datang, tetapi ada perdebatan sama ada argumen pemboleh ubah akan dibenarkan, atau jika pilihannya akan terhad kepada nilai yang telah ditetapkan (lebih banyak mengenai yang kemudian) .

Menyelaraskan lebar bar tatal sangat penting pada halaman atau antara muka pengguna dengan ruang yang terhad, di mana pemangkasan hanya beberapa piksel dari bar tatal (atau mengeluarkannya sepenuhnya) dapat memberi cukup ruang untuk bernafas, tanpa menghilangkan kemampuan untuk menatal.

Sebagai contoh, bayangkan antara muka penyuntingan teks yang mana keperluannya sesuai dengan bekas yang pendek dan sempit. Dalam keadaan seperti itu, bar tatal dapat mengambil banyak ruang yang tersedia:

dengan scrollbar-width: auto;

Dengan scrollbar-width, kita dapat menetapkan lebar thinuntuk menjimatkan sedikit ruang:

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

Atau, kita boleh menetapkan lebar untuk nonemenghapusnya sepenuhnya, menjimatkan lebih banyak ruang (dengan anggapan kita baik-baik saja dengan bar tatal hilang):

.scrollable-element ( scrollbar-width: none; )
textareadengan scrollbar-width: none;- dan anda masih boleh menatal!

Sintaks

scrollbar-width: auto | thin | none | ;

Nilai

scrollbar-width menerima nilai berikut:

  • auto adalah nilai lalai dan akan menjadikan bar tatal standard untuk ejen pengguna.
  • thin akan memberitahu ejen pengguna untuk menggunakan bar tatal yang lebih nipis, jika berkenaan.
  • none akan menyembunyikan bar tatal sepenuhnya, tanpa menjejaskan kebolehulasan elemen.
  • sedang dibahaskan, tetapi (jika ditambahkan) lebar maksimum bar tatal.

Contohnya

Sokongan Penyemak Imbas

Ini untuk penyesuaian keseluruhan bar tatal. Untuk pertaruhan terbaik anda menggayakan penyemak imbas bar tatal, lihat di sini.

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

Desktop

Chrome Firefox IE Hujung Safari
91 * 87 11 88 * TP *

Mudah Alih / Tablet

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

Berkaitan

  • scrollbar-gutter
  • scrollbar-color
  • scrollbar

Sumber

  • Draf Modul CSSWG Scrollbars
  • Koleksi kes penggunaan W3C untuk pengubahsuaian bar tatal
  • Masa Depan CSS: Bar tatal pada dev.to
  • w3c Perbincangan Github mengenai kawalan lebar bar tatal