CSS SCROLL BAR BİÇİMLENDİRME

MErhaba..

Web sayfalarında gördüğümüz , kaydırma çubuklarını ::-WEBKİT-SCROLLBAR  PSEUDO sınıfı ile biçimlendirebiliyoruz...

SCROLLBAR

Web sayfalarının kenarlarında görünen kaydırma çubukları SCROLL-BAr olarak isimlendirilir. Kaydırma çubujları sadece sayfalarda değil , içerik taşmakontrolü için , sayfada kullanılan blok elemanlardada kullanılabilir.. Kaydırma çucubklarını ::webkit-scrollbar sınıfı ile biçimlendirebiliriz..

Scroll Bar 3 bölümden oluşur;

• Scroll Bar Alanı        (::webkit-scrollbar)
• Scroll Bar Yolu         (::webkit-scrollbar-track)
• Scroll Bar Sürgüsü    (::webkit-scrollbar-thumb)

Ekran kaydırma çubuklarının görünebilmesi için , içeriğin mevcut yükseklik yada genişlikten fazla olması gerekir. Biçimlendirme için yukarıdaki pseudo sınıflar kullanılır...

CSS

/* Scroll Alanı */
::-webkit-scrollbar {width: 15px;}

/* Scroll Yolu */
::-webkit-scrollbar-track {background: skyblue;}

/* Scroll Sürgüsü*/
::-webkit-scrollbar-thumb {background: orange;}

/* Sürgü üzerine gelince */
::-webkit-scrollbar-thumb:hover {background: #fff;}

EKRAN

Yukarıdaki sayfada scroll bar alanı mavi , kaydırma sürgüsü turuncu olmuş olur.. Bu CSS tanımlaması için yapılan scrool bar biçilendirmesi , sayfadaki tüm kaydırma çubukları için kullanılır. Sadece istediğimiz bir elemanda olmasını istersek bu kez , pseudo sınıflarının başına o elemanın seçicisisni eklememiz gerekir. Ayrıca elemanın taşma (overflow) özelliğinin , scroll yada auto olarak ayarlanmış olması gerekir..

CSS

div [width:200px;height:200px;overflow:scroll}

/* Scroll Alanı */
div::-webkit-scrollbar {width: 15px;}

/* Scroll Yolu */
div::-webkit-scrollbar-track {background: skyblue;}

/* Scroll Sürgüsü*/
div::-webkit-scrollbar-thumb {background: orange;}

/* Sürgü üzerine gelince */
div::-webkit-scrollbar-thumb:hover {background: #fff;}

HTML

<div>
Lorem ipsum dolor sit amet consectetur adipisicing, elit. Facere neque, reprehenderit. Id ut cum dolore voluptates vel adipisci qui quod possimus quos soluta at ipsum, molestias cupiditate ratione nesciunt, provident? Lorem ipsum dolor sit amet consectetur adipisicing, elit. Facere neque, reprehenderit. Id ut cum dolore voluptates vel adipisci qui quod possimus quos soluta at ipsum, molestias cupiditate ratione nesciunt, provident?
</div>

EKRAN

Yukarıdaki sadece DIV için scrollbar biçimlendirmesi yapılmış olur ve sayfaya ait kaydırma çubukları bu biçimden etkilenmez..

Görüşmek üzere..