Kaydırma çubuğu rengi - CSS Hileleri

Anonim

scrollbar-color: Tesiste kaydırma çubuğu iki renk kontrol eden başparmak renk ve iz rengi . scrollbar-colorCSS Çalışma Grubunun Kaydırma Çubukları Modül Seviye 1 taslağının bir parçasıdır ve bu yazı itibariyle halen devam eden bir çalışmadır.

Önceden scrollbar-colorgeliştiricilerin, kaydırma çubuğunu overflow: hiddenJavaScript tabanlı kaydırma çubukları aracılığıyla gizlemeye ve görüntülemeye başvurmadan veya tarayıcı önekli kaydırma çubuğu özniteliklerini kullanmadan tarayıcının kaydırma çubuklarının varsayılan görünümünü değiştirmenin standart bir yolu yoktu . İle scrollbar-color, diğer taraftan, biz tarayıcı işlevselliğini yineleme veya satıcı önekler kullanarak başvurmadan bir tasarım eşleştirmek için bir kaydırma çubuğu stil özelliklerini ayarlayabilirsiniz.

.scrollable-element ( scrollbar-color: red yellow; )
Özel renklerle çıldırın

scrollbar-colorayrıca , Mac OSX'te karanlık mod gibi bir şey kullanıyorlarsa, bir kullanıcının tercihleriyle eşleşecek darkve değerlerini kabul edecektir light.

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

Mart 2019 itibarıyla, herhangi bir tarayıcıda destek darkve lightdeğerler sunulmamaktadır. Firefox'ta desteklenmektedir. Ayrıntılar için aşağıdaki tarayıcı desteği bölümüne bakın.

Sözdizimi

scrollbar-color: auto | dark | light | ;

Değerler

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

  • auto varsayılan değerdir ve kullanıcı aracısı için standart kaydırma çubuğu renklerini oluşturur.
  • dark kullanıcı aracısına, geçerli renk düzenine uyması için daha koyu kaydırma çubuklarını kullanmasını söyleyecektir.
  • light kullanıcı aracısına, mevcut renk düzenine uyması için daha açık kaydırma çubukları kullanmasını söyleyecektir.
  • kaydırma çubuğu için kullanılacak iki rengi belirtir. İlk renk, kaydırma çubuğunun üstte görünen "başparmağı" veya hareketli kısmı içindir. İkinci renk, kaydırma çubuğunun "iz" veya sabit kısmı içindir.

Misal

Bu, yeni özellik sözdizimini ve WebKit önekli öğelerini birleştirir.

Tarayıcı Desteği

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

Kaynaklar

  • Stil Kaydırma Çubuklarının Mevcut Durumu
  • WebKit'te Özel Kaydırma Çubukları
  • 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ı
  • Chromium Issue 891944