HTML Kaydırma Çubuğunu Özelleştirme

Kaydırma çubukları her tarayıcı için farklı görünümde olabilir. Eğer isterseniz bu kaydırma çubuklarını özelleştirebilirsiniz (Bilimin Rengi'nde olduğu gibi). Yani görünümünü değiştirebilirsiniz. Bizde sizlere bugün bunu nasıl yapacağınızı anlatmaya çalışacağız.

Şimdi sizlere kaydırma çubuğunu özelleştirmeniz için temel kodları vereceğiz.

Tüm sayfa için kaydırma çubuğu:

::-webkit-scrollbar{
 width: 10px;
 background-color: #ddd;
}

::-webkit-scrollbar-thumb{
 background-color: red;
}

::-webkit-scrollbar-thumb:hover{
 background-color: green;
}

::-webkit-scrollbar-thumb:active{
 background-color: blue;
}

Belirli bir sınıf (class) için kaydırma çubuğu:

.sinif::-webkit-scrollbar{
 width: 10px;
 background-color: #ddd;
}

.sinif::-webkit-scrollbar-thumb{
 background-color: red;
}

.sinif::-webkit-scrollbar-thumb:hover{
 background-color: green;
}

.sinif::-webkit-scrollbar-thumb:active{
 background-color: blue;
}

Böyle belirli bir sınıf için yaparsanız, özelleştirdiğiniz kodlar sadece bu sınıf (class) için olacaktır.

Yukarıdaki kodlardan;
-webkit-scrollbar : Kaydırma çubuğu bölgesi oluşturur.
-webkit-scrollbar-thumb : Kaydırma çubuğunu oluşturur.
-webkit-scrollbar-thumb:hover : Üzerine gelince oluşacak durumu belirtir.
-webkit-scrollbar-thumb:active : Tıklandığında oluşacak durumu belirtir.

Videolu anlatım:::


Birkaç örnekli kodları alttaki linkten indirebilirsiniz.


:::KAYNAK DOSYALARINI İNDİR:::

index.html ve style.css dosyalarını İNDİR