Kaydırma çubuğu genişliği - CSS Hileleri

Anonim

CSS'deki scrollbar-widthözellik, bir kaydırma çubuğunun genişliğini veya "kalınlığını" kontrol eder. scrollbar-widthCSS Çalışma Grubu'nun Kaydırma Çubukları Modül Seviye 1 taslağının bir parçasıdır ve halen devam eden bir çalışmadır. Bu makaleyi yazarken fikir birliği, scrollbar-widthCSS'nin gelecekteki sürümlerine dahil edilmesi muhtemeldir, ancak bir değişken argümana izin verilip verilmeyeceği veya seçeneklerin önceden ayarlanmış değerlerle sınırlı olup olmayacağı tartışılmaktadır (daha sonra bunlarla ilgili daha fazlası) .

Kaydırma çubuğunun genişliğinin ayarlanması, sınırlı alana sahip sayfalarda veya kullanıcı arabirimlerinde özellikle önemlidir; kaydırma çubuğundan yalnızca birkaç pikselin kırpılması (veya tamamen kaldırılması), kaydırma yeteneğini kaldırmadan içeriğin nefes alması için yeterli alan sağlayabilir.

Örneğin, ihtiyaçların kısa, dar bir kaba sığması gereken bir metin düzenleme arayüzü hayal edin . Böyle bir durumda, kaydırma çubuğu mevcut alanın çoğunu kaplayabilir:

ile scrollbar-width: auto;

İle scrollbar-width, thinbiraz yer kazanmak için genişliği ayarlayabiliriz :

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

Ya da genişliği nonetamamen kaldıracak şekilde ayarlayabilir ve daha fazla yer tasarrufu sağlayabiliriz (kaydırma çubuğunun kaybolmasında sorun olmadığımızı varsayarak):

.scrollable-element ( scrollbar-width: none; )
textareaile scrollbar-width: none;- ve yine de kaydırabilirsiniz!

Sözdizimi

scrollbar-width: auto | thin | none | ;

Değerler

scrollbar-width aşağıdaki değerleri kabul eder:

  • auto varsayılan değerdir ve kullanıcı aracısı için standart kaydırma çubuklarını oluşturur.
  • thin kullanıcı aracısına, uygun olduğunda daha ince kaydırma çubukları kullanmasını söyleyecektir.
  • none öğenin kaydırılabilirliğini etkilemeden kaydırma çubuğunu tamamen gizler.
  • tartışılıyor, ancak (eklenirse) kaydırma çubuğunun maksimum genişliği olacaktır.

Misal

Tarayıcı Desteği

Bu, kaydırma çubuklarının genel olarak özelleştirilebilirliği içindir. En iyi bahsinizi tarayıcılar arasında kaydırma çubuğu şekillendirmek için buraya bakın.

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.

Masaüstü Bilgisayar

Krom Firefox IE Kenar Safari
91 * 87 11 88 * TP *

Mobil / Tablet

Android Chrome Android Firefox Android iOS Safari
88 * Hayır 81 * 14.0-14.4 *

İlişkili

  • scrollbar-gutter
  • scrollbar-color
  • scrollbar

Kaynaklar

  • CSSWG Kaydırma Çubukları Modülü taslağı
  • Kaydırma çubuğu değişikliği için W3C kullanım durumları koleksiyonu
  • CSS'nin Geleceği: Dev.to'da kaydırma çubukları
  • Kaydırma çubuğu genişlik kontrolü hakkında w3c Github tartışması