scrollbar-color
: Tesiste kaydırma çubuğu iki renk kontrol eden başparmak renk ve iz rengi . scrollbar-color
CSS Ç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-color
geliştiricilerin, kaydırma çubuğunu overflow: hidden
JavaScript 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; )
scrollbar-color
ayrıca , Mac OSX'te karanlık mod gibi bir şey kullanıyorlarsa, bir kullanıcının tercihleriyle eşleşecek dark
ve değerlerini kabul edecektir light
.
.scrollable-element ( scrollbar-color: dark; )
Mart 2019 itibarıyla, herhangi bir tarayıcıda destek dark
ve light
değ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