CSS ile kaydırma çubuğunu özelleştirme 🖌️

Bu yazıda web sitelerinin yanında çıkan ve aşağıya kaydırmanızı sağlayan kaydırma çubuğu ( ScrollBar ) ‘ı nasıl özelleştirebileceğinizi anlattım.

Kaydırma çubuğu css seçicileri

Çoğu web geliştiricisi kaydırma çubuğuna css ile özel bir tasarım ekleyebileceğini bilmiyor. Bunu yapmak için özel birkaç css seçici tag’i kullanacağız.

::-webkit-scrollbar | kaydırma çubuğu ana gövde elementi

Bu css seçicisi ile kaydırma çubuğunun arkasında bulunan gövde elementini seçebilirsiniz. Boyut ve renk gibi özelliklerini değiştirebilirsiniz.

Aşağıda örnek kod kaydırma çubuğunun genişliğini 4rem ve arkaplanını mavi yapar.

::-webkit-scrollbar {
    width: 4rem;
    background-color : blue;
}

::-webkit-scrollbar-track | kaydırma çubuğu arka planı

Bu element üsttekine benzer ama bunun farkı kaydırılan kısmın direkt olarak arka planı olması.

Örnek olarak aşağıdaki kod ile kaydırma bölgesini yeşil yapar.

::-webkit-scrollbar-track {
    background-color: green;
}

::-webkit-scrollbar-thumb | kaydırma çubuğu tutma yeri

Bu seçici ise kaydırma çubuğunun kendisi, fare ile tutup kaydırılan yer.

Aşağıdaki kod arkaplan rengini mavi yapar, ayrıca fare ile üstüne gelince koyu mavi yapar

body::-webkit-scrollbar-thumb {
  background-color: blue;
  
}
body::-webkit-scrollbar-thumb:hover {
  background-color: darkblue;
  
}

Örnek bir özel kaydırma çubuğu tasarımı

Aşağıdaki etkileşimli CodePen’de yaptığım bir kaydırma çubuğunu görebilirsiniz. Gri arkaplanı ve yeşil tutma kısmı var.

See the Pen Css kaydırma çubuğu özelleştirme by burakhan ünver (@Alex-Turner-the-builder) on CodePen.

Yorum bırakın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Scroll to Top