Bugün paylaştığım HTML5'te Spellcheck Özelliğini Kullanmak yazısından sonra taze kodladığım bir scrollbar için yazdığım kodları da örnek olarak paylaşmak ve bu konuda da native css kodları ile çoğu tasarım ihtiyacınızı tüm tarayıcılar tarafından desteklenecek şekilde çözebileceğinizi göstermek istedim.
Scrollbar (kaydırma çubuğu) özelleştirmesi konusunda uzun yıllardan beri birçok kütüphane hazırlandı, bunlar çoğunlukla javascript ya da jquery ile sitedeki scrollbar'ların tasarımını değiştiren kütüphanelerdi ve çoğu da ya responsive tasarımlarda bozuluyordu, ya da farklı tarayıcılarda tutarsız tasarımlara neden oluyorlardı. ::-webkit-scrollbar özelleştirmeleri ise bence çok daha pratik ve sağlıklı bir şekilde scrollbar'ı özelleştiröye olanak sağlamış oluyorlar. Bu özellikleri açıklayacak olursak:
::-webkit-scrollbar { /* kaydırma çubuğu */ }
::-webkit-scrollbar-button { /* alt üst ok butonları */ }
::-webkit-scrollbar-track { /* çubuğun kaydırıldığı tüm alan */ }
::-webkit-scrollbar-track-piece { /* çubuğun kaydırıldığı pasif alan */ }
::-webkit-scrollbar-thumb { /* kaydırma çubuğu */ }
::-webkit-scrollbar-corner { /* kaydırma alanının köşesi */ }
::-webkit-resizer { /* yeniden boyutlandırma simgesi */ }
Not: Scrollbar (kaydırma çubuğu) çıkmasını istediğiniz yerler de tahmin edebileceğiniz gibi overflow eksenleri.
Önce Google Chrome'da herhangi bir stil eklenmemiş default scrollbar tasarımına bir göz atalım.
<div style="width: 100px; height: 100px; overflow-x: scroll; overflow-y: scroll;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Şimdi scrollbar'ımızı biraz özelleştirelim.
::-webkit-scrollbar {width: 12px;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.3); border-radius: 10px;}
::-webkit-scrollbar-thumb {border-radius: 20px; -webkit-box-shadow: inset 0 0 6px rgba(200,50,60,0.5); }
