BaşlangıçGenelCSS’de Özel Scrollbar (Kaydırma Çubuğu) Nasıl Yapılır?

CSS’de Özel Scrollbar (Kaydırma Çubuğu) Nasıl Yapılır?

Genel Yorum Yapılmamış

CSS’de tasarımlarımızın en şık öğelerinden beri temaya uyumlu kaydırma çubukları yapmaktır. Şık bir scrollbar temaya daha başka bir hava verebilir.

Sitesinin görünüşüne scroll bar ile değişiklik vermek isteyenler, bu konu sizin için.

CSS Kodları:

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 3px #333;
    background-color: #555;
}
 
::-webkit-scrollbar {
    width: 6px;
    background-color: #fff;
}
 
::-webkit-scrollbar-thumb {
    background-color: #fc6023;
}

Bu kodları stil sayfanıza eklerseniz, tarayıcınızın sağında görülen büyük kaydırma çubuğu stil alır.

Eğer siz bir div’in yani bir kutunun scrollbarını değiştirmek istiyorsanız yapmanız gereken :: ibaresinden önce o divi yazmak.

Örneğin:

.kutu::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 3px #333;
    background-color: #555;
}
 
.kutu::-webkit-scrollbar {
    width: 6px;
    background-color: #fff;
}
 
.kutu::-webkit-scrollbar-thumb {
    background-color: #fc6023;
}

Yazar hakkında

emregüney

18 yaşında, lise mezunu, üniversite sınavlarına hazırlanan, bilgisayar meraklısı, esmer, metal müziği kalbinde yaşayan biri.

Önerilen Yazılar

Yorum yap