CSS Web Sitelerinde Kaydırma Çubuğu Renk Değiştirme

Bu HTML ve CSS eğitiminde herhangi bir JavaScript dosyası kullanmadan yandaki ScrollBar’ı nasıl değiştirebileceğimizi, nasıl kişiselleştirebileceğiniz göstereceğim. İstediğiniz renkte ve tarzda ScrollBar oluşturabileceksiniz. Öncelikle iki dosyamız olacak, index.html ve style.css. index.html’e hemen temel HTML kodlarını ekleyelim.

Link etiketiyle de style.css’i index.html sayfasına bağladık. Bu eğitimde amacımız ScrollBar’ı değiştirmek olduğu için ScrollBar’ı ortaya çıkaracak bir paragraf eklemem gerekiyor. Bunu da hemen P etiketiyle, içerisine Dummy Text ekleyerek yapalım. Bu şekilde Dummy Text’leri ekliyoruz. Ve bu dosyayı kaydettiğimde sağ taraftaki ScrollBar’ı göreceksiniz. Şimdi de bu ScrollBar’ı kişiselleştirmek için style.css dosyasına geçelim. Öncelikle sayfanın daha güzel görünmesi için bir body etiketi ekledim ve kenar boşluklarını verdim. Satır aralarını açtım. Şimdi de metinleri her iki yana yasladığımız Justify kodunu kullanalım. Böylece daha düzenli görünecek. Sayfayı genel olarak hazırladığımıza göre şimdi de ScrollBar’ın kişiselleştirilmesine geçebiliriz. ScrollBar’ı kişiselleştirmek için bazı kodlar kullanacağız CSS üzerinde ve bu kodları deneyerek ne işe yaradıklarını göreceğiz. Öncelikle kaydırma çubuğunu genel olarak kapsayan. Webkit ScrollBar özelliğini ekliyoruz. Bu özelliğe farklı parametreler uygulayabiliriz, ilk olarak Background ile başlayalım. Background özelliğine siyah renk atadığımızda burada gördüğünüz gibi kaydırma çubuğu siyah olacaktır. Kaydırma çubuğunu tuttuğumuz nokta görünmeyecek şu anda. Çünkü şu anda onu henüz belirlemedik.

ScrollBar rengini buradan bir renk seçerek aktarıyorum. Böyle bir renk ekleyelim, kaydırma çubuğunu da daha da koyulaştırırız. Şimdi de bunun genişliğini ayarlayalım. Width değerini kullanacağız, ince bir yapıda olsun isterseniz, 10 piksel kullanabiliyoruz veya daha kalın olmasını istiyorsak da buradaki sayıyı yükseltebiliyoruz. Şimdilik 14 olaylarında kalsın.


body {
    margin: 40px;
    line-height: 24px;
}

p {
    text-align: justify;
}

::-webkit-scrollbar {
    background: #95a5a6;
    width: 14px;
}

::-webkit-scrollbar-thumb {
    background: #2c3e50;
}

Şimdi de bu kaydırma çubuğunu fare ile tıkladığımız yere gelelim. Bu özelliği kullanabilmemiz için webkit-scrollbar-thumb metnini eklememiz gerekiyor. Buna bir renk atayabiliriz. Örneğin seçeneklerden bu rengi kopyalıyorum ve Background kısmına bu rengi yapıştırıyorum. Bakalım şimdi sonuç nasıl olmuş?

Gördüğünüz gibi, fare ile tuttuğumuz bu yerde, renk atamamızla birlikte belirdi. Genel olarak ScrollBar’ın değişme mantığı, kişiselleştirilme mantığı bu şekilde. Buraya eklediğiniz CSS kodlarıyla daha da kişiselleştirebilirsiniz. Örneğin kaydırma çubuğunun bu kenarının köşeli olmasını istemiyorsunuz diyelim. Buna Border Radius verebiliriz. 10 piksellik bir Border Radius verdiğimde gördüğünüz gibi bu kaydırma çubuğunun köşelerini yuvarlaklaştığını göreceksiniz. Bu tip düzenlemelerle kaydırma çubuğunu da kişiselleştirebilirsiniz. Arka plandaki bu kaydırma çubuğu alanında herhangi bir renk kullanmak istemeyebilirsiniz de. Bu kısmı transparan yapmak istediğinizde de background kısmını çıkararak burada herhangi bir renk olmamasını sağlayabiliyoruz. Bu durumda da sadece kaydırma çubuğunun kendisi görünecek. Bu özelliği de gösterdiğime göre yaptığım işlemi geri alıyorum. Herhangi bir JavaScript dosyası kullanmadan sadece HTML ve CSS ile standart tarayıcı ve işletim sistemi özelliklerinden çıkarak kaydırma çubuğunu renklerini nasıl kendimize göre değiştirebiliriz, bunu gösterdim.

Popular Eğitimler

Modern CSS Checkbox (Toggle Switch / Custom Checkbox) Nasıl Yapılır?

Daha önce HTML ile iletişim formları oluşturduysanız ve Check Box’lardan, standart ve…

JavaScript ile AdBlocker Eklentisi Algılama

Web sitelerinin çoğu, gelirlerini sitedeki reklamlarla sağlarlar ve Chrome ya da Firefox…

HTML ve CSS ile Mouse Hover Efekti Buton Animasyonu

Hareketli butonlar insanların ilgisini çekebilir. Fare imleci ile üzerine gelindiğinde ilgi çekici…

Uppercase Türkçe Karakter Problemi ve Çözümü

Uppercase özelliği, CSS’te tüm karakterlerin büyük harfle yazılmasını sağlar. Ama sayfanın doğru…

Responsive Web Design

Responsive web siteleri akıllı telefonların ve  tabletlerin yaygınlaşmasıyla hayatımızda büyük bir önem…

jQuery ve DrawSVG ile Hareketli SVG İkon Kullanımı

Web sitenizde hareketli SVG (animated SVG) kullanımı nasıl yapılır? Web sitelerinde göze…