Scrollbar Değiştirme Yöntemleri – Eklentili ve Eklentisiz

Web sayfalarında genel veya özel bölgelerde aşağı yada yukarı hareket etmek için kullanılan scrollbar olarak adlandırılan kaydırma çubuğunu scrollbar değiştirme yöntemleri kullanıp, her tarayıcı için ufak çapta farklı görünebilen bu aracı kendi isteğimize göre özelleştirmek ve görünümünü değiştirmek isteyebiliriz.

Sadece CSS kodları ile scrollbar görünümü değiştirme yapılabiliyor olsa da hem CSS hem JS tabanlı kaydırma çubuğunun değiştirilmesi daha stabil ve sağlam bir çözüm olacaktır.

CSS ile scrollbar rengini değiştirme işlemi aşağıdaki kodlar ile yapılabilir. Bu kodlar ile sayfa üzerinde scrollbar çıkan her yerde özelleştirilmiş kaydırma çubuğu gözükmüş olacak.

::-webkit-scrollbar {
	width: 10px; /*genislik 10px olsun*/
	background-color: #eaeaea; /*scrollbar arkaplan renk*/
	border-left: 1px solid #f1f1f1;  /*arkaplan sol tarafa cizgi cek*/
}
::-webkit-scrollbar-thumb {
	background-color: #a0a0a0; /*scrollbar renk*/
	border-radius:15px /*oval olsun*/
}
::-webkit-scrollbar-thumb:hover { /*tiklandiginda*/
	background-color: #7d7d7d;
}

Veya sayfanın sadece belirli bölümlerinde ortaya çıkan kaydırma çubuklarını özelleştirmek istersek aşağıdaki şekilde kullanabiliriz. Aşağıdaki kodlar ile “ornekBolge” sınıf ismine sahip etiketlerin içerisinde özelleştirilmiş scrollbar kullanılabilir hale gelir.

.ornekBolge::-webkit-scrollbar {
	width: 10px; /*genislik 10px olsun*/
	background-color: #eaeaea; /*scrollbar arkaplan renk*/
	border-left: 1px solid #f1f1f1;  /*arkaplan sol tarafa cizgi cek*/
}
.ornekBolge::-webkit-scrollbar-thumb {
	background-color: #a0a0a0; /*scrollbar renk*/
	border-radius:15px /*oval olsun*/
}
.ornekBolge::-webkit-scrollbar-thumb:hover { /*tiklandiginda*/
	background-color: #7d7d7d;
}

Ancak sadece CSS ile kaydırma çubuğu görünümünü değiştirme işlemi Google Chrome, Yandex Browser, Torch Browser gibi genellikle chromium tabanlı güncel tarayıcılar üzerinde çalışır ancak Mozilla Firefox, Edge ve özellikle İnternet Explorer gibi tarayıcılar tarafından desteklenmez.

Kaydırma Çubuğu Özelleştirme Eklentileri

HTML kaydırma çubuğu değiştirme işleminin bütün tarayıcılar tarafından desteklenmesi için Javascript tabanlı eklentiler kullanılmalıdır. Aşağıda bu eklentilerden bazılarını listeleyeceğim. Projenize uygun bir eklentiyi seçip, kendinize uygun bir şekilde düzenleyip rahatlıkla kullanabilirsiniz.

Scrollator – Jquery Tabanlı Kaydırma Çubuğu

Demo ve İndirme Adresi: https://github.com/QODIO/scrollator

Nicescroll – Kolay Kullanım

Demo ve İndirme Adresi: https://nicescroll.areaaperta.com/demo/

Gromo Jquery Scrollbar – Jquery ve CSS ile özelleştirilebilir Kaydırma Çubuğu

Demo ve İndirme Adresi: https://github.com/gromo/jquery.scrollbar

Malihu Custom Scrollbar – Jquery

Demo ve İndirme Adresi: http://manos.malihu.gr/jquery-custom-content-scroller/

Perfect Scrollbar – Sade Kodlama

Demo ve İndirme Adresi: https://github.com/mdbootstrap/perfect-scrollbar

Tiny Scrollbar – Jquery Tabanlı

Demo ve İndirme Adresi: https://baijs.com/tinyscrollbar/