yandex

CSS3 ile Kaydırma Çubuğunu Düzenlemek

Bu içerik 2 sene önce dogukanbatal tarafından yazılmıştır.
Paylaş:

Merhaba arkadaşlar bu yazımda sizlere CSS ile sitenizdeki Kaydırma Çubuğunu(Scroll Bar) düzenlemeyi anlatıcağım, Başlayalım…

 

CSS3 ile Kaydırma Çubuğunu Düzenlemek

Çok basit bir işlem sitenizin stil dosyasına aşağıdaki kodları giriniz ve kendinize göre düzenleyiniz.

Şimdi bu yukarıdaki kodları açıklayalım.

scrollbar: Burada 8px lik bir genişlik belirttik burada scrollbarın genel ayarlarının olduğu kısım.

scrollbar-track: Yukarı aşağı indirdiğimiz kaydırma çubuğun dışında kalan kısmını buradan ayarlıyoruz.

scrollbar-thumb: Kaydırma çubuğunun rengi aşağı veya yukarı hareket ettirdiğimiz kısım.

scrollbar-thumb:hover: Aşağı veya yukarı hareket ettirdiğimiz kısımın fare ile üzerine gelince hangi işlemleri yapılacağını seçtiğimiz kısım.

Ben bununla ilgili Codopen`de bir örnek yaptım aşağıdan inceleyebilirsiniz.Ek olarak scrollbar kodlarında tarayıcı desteği için ön ekleri eklemeyi unutmayın.

 

See the Pen CSS3 Scroll Bar Edit by Doğukan (@dogukanbatal) on CodePen.

YORUMLAR ;