Özel Kaydırma Çubukları Mixin - CSS Hileleri

Kaydırma çubukları, internetin hemen hemen her sayfasında bulunan UI bileşenlerinden biridir, ancak biz (geliştiriciler) üzerinde çok az kontrolümüz var veya hiç yok. Bazı tarayıcılar bize görünüşlerini özelleştirme yeteneği verir, ancak Firefox dahil çoğu tarayıcı için bu mümkün değildir.

Kaydırma çubuklarının stilinde bazı güncellemeler ve standartlaştırma yapılmıştır. Bir mixin'e taşıyabileceğiniz en sonuncusu için Stil Kaydırma Çubuklarının Mevcut Durumu'na bakın.

Yine de, Chrome ve Internet Explorer (evet), kaydırma çubukları için özel stiller tanımlamamızı mümkün kılıyor. Ancak sözdizimi korkunç derecede karmaşık ve elbette kesinlikle standart değil. Tescilli dünyaya hoş geldiniz. Bu nedenle, kaydırma çubuklarınızı kolayca özelleştirmek için biraz karıştırmaya sahip olmak isteyebilirsiniz. Sağ?

@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) ( // For Google Chrome &::-webkit-scrollbar ( width: $size; height: $size; ) &::-webkit-scrollbar-thumb ( background: $foreground-color; ) &::-webkit-scrollbar-track ( background: $background-color; ) // For Internet Explorer & ( scrollbar-face-color: $foreground-color; scrollbar-track-color: $background-color; ) )

Kullanım:

body ( @include scrollbars(10px, pink, red); ) .custom-area ( @include scrollbars(.5em, slategray); )

Misal

CodePen'de Hugo Giraudel'in (@HugoGiraudel) kaydırma çubuğu stili için Pen Sass karışımına bakın.

Daha ileri gitmek

Her iki tarayıcıda da renk ve boyuttan çok daha fazla seçenek vardır. Bununla birlikte, genellikle göz ardı edilirler, bu yüzden bu seçeneklerle mixin'i aşırı doldurmaya değeceğini düşünmüyorum. Ekstra seçeneklerle daha gelişmiş bir mixin oluşturmaktan çekinmeyin.

Diğer okumalar: