CSS Scrollbar Rengi Değiştirme

Web projelerinizin tasarımında en zor kısımlardan birisi de tasarım, renk ve uyumluluktur. Her şey güzel hoş derken sol kısımda scrollbar bölümünün gri tonda ve göze hoş gelmeyecek bir biçimde olması sebebiyle rengini değiştirmek isteyebilirsiniz. Aşağıda vermiş olduğum kodu her sayfada gözükecek bir css dosyasının içine ekleyin ve renk ayarlarını yaparak kullanmaya başlayın.

Nasıl Yapılır?
1) CSS içine nasıl eklendiğinden bahsetmeyeceğim zaten pek çoğunuz bunu biliyorsunuz.
2) “::-webkit-scrollbar” Bu sağdaki scrollbarın arkaplan rengidir değiştirmek için “#eaeaeaHTML renk kodunu istediğiniz renkle değiştirebilirsiniz.
3) “::-webkit-scrollbar-thumb” Bu üzerine gelip tutup aşağı yukarı kaydırdığınız scroll butonudur, rengini değiştirmek için “#dd3333” kodunu değiştirin.
4) “::-webkit-scrollbar-thumb:hover” Son olarak bu ise kullanıcının mouse ile üzerine geldiğinde scrollun değişeceği renktir.
5) Yukarıda listelediğim ayarlamalarla sitenize uygun renge ve şekle sokarak kullanabilirsiniz.

Kod:

::-webkit-scrollbar {
width: 10px;
background-color: #eaeaea;
border-left: 1px solid #ccc;
}
::-webkit-scrollbar-thumb {
background-color: #dd3333;
}
::-webkit-scrollbar-thumb:hover {
background-color: #1e73be;
}