Bu rehberde tarayıcıların sağında bulunan tarayıcı kaydırma çubuğunun (scrollbar) nasıl düzenleneceği öğreniyor olacaksınız. Birkaç satır sitil kodu eklemek yerine, örnek ile birlikte işlem mantığı anlatmanın daha iyi olacağını düşündük. Bu nedenle konu ile ilgili detaylı bir içerik oluşturduk, böylelikle istediğiniz gibi düzenleme yapabilirsiniz. Webkit ile çalışarak sitenizin UI tasarımına uygun bir kaydırma çubuğu yapmanız oldukça iyi olacaktır. CSS ile yapacağımız düzenlemelerden önce kaydırma çubuğunda hangi seçicilerin bulunduğunu ve ne işe yaradıklarını bilmemiz gerekiyor.
Webkit ile işlem yapacağımız için yaptıklarınız sadece desteklenen tarayıcılarda ve Opera’nın 15 ve üzeri sürümünde çalışacaktır. Diğer tarayıcılar için jQuery kullanmanız gerekmektedir. Seçicilerin desteklendiği ve desteklenmediği tarayıcılar ile ilgili yazının sonundaki listeye bakmayı unutmayın.
CSS kaydırma çubuğu seçicileri;
- ::-webkit-scrollbar Kaydırma tamamı tamamı.
- ::-webkit-scrollbar-button kaydırma çubuğunun altında ve üstünde bulunan yukarı ve aşağı düğmesi.
- ::-webkit-scrollbar-thumb sürüklenebilir kaydırma kolu.
- ::-webkit-scrollbar-track kaydırma çubuğunun izi (ilerleme çubuğu).
- ::-webkit-scrollbar-track-piece Kolun tutamağın kapsamadığı kısmı (ilerleme çubuğu).
- ::-webkit-scrollbar-corner hem yatay hem de dikey kaydırma çubuklarının birleştiği kaydırma çubuğunun alt köşesi.
- ::-webkit-resizer bazı öğelerin alt köşesinde görünen sürüklenebilir yeniden boyutlandırma tutamacı.
Webkit seçicilerinin kullanımı;
Site içerisine gömülmüş bir textarea ve iframe gibi kaydırma çubuğu bulunduran bir alan için de kullanabileceğiniz seçicileri, başına hiç bir şey eklemediğinizde tarayıcı da dahil olmak üzere sitenizin tamamında kullanmış olursunuz. Yukarıdaki listede gördüğünüz 7 seçiciden ihtiyacınız olanı sonrasına eklemek ve sitil tanımlaması yapmak yeterli olacaktır. Birkaç örnek vermek gerekir ise şu işlemler için şu kullanımlar gerekiyor;
Kaydırma çubuğunun genişliğini 10px yapma:
::-webkit-scrollbar {width: 10px;}Kaydırma çubuğunun rengini değiştirme:
::-webkit-scrollbar-track {background: #f1f1f1;}Kaydırma çubuğu kolunun rengini değiştirme:
::-webkit-scrollbar-thumb {background: #33363c;}Kaydırma çubuğu kolunun kenarlarını yuvarlama:
::-webkit-scrollbar-thumb {border-radius: 4px;}Kaydırma çubuğu kolunun işaretlenmiş (:hover) rengini değiştirme:
::-webkit-scrollbar-thumb:hover {background: #555;}Kaydırma Çubuğu Seçicilerinin Tarayıcı Uyumlulukları;
| Masaüstü Tarayıcılar | ||||||
Seçiciler |  |  |  |  |  |  |
| ::-webkit-scrollbar | Evet | Hayır | Hayır | 15 | Evet | Hayır |
| ::-webkit-scrollbar-button | Evet | Hayır | Hayır | 15 | Evet | Hayır |
| ::-webkit-scrollbar-thumb | Evet | Hayır | Hayır | 15 | Evet | Hayır |
| ::-webkit-scrollbar-track | - | - | - | - | - | - |
| ::-webkit-scrollbar-track-piece | Evet | Hayır | Hayır | 15 | Evet | Hayır |
| ::-webkit-scrollbar-corner | Evet | Hayır | Hayır | 15 | Evet | Hayır |
| ::-webkit-resizer | Evet | Hayır | Hayır | 15 | Evet | Hayır |
| Mobil Tarayıcılar | |||||||
| Seçiciler |  |  | | | | | |
| ::-webkit-scrollbar | Evet | Evet | Evet | Hayır | Hayır | 14 | Evet |
| ::-webkit-scrollbar-button | Evet | Evet | Evet | Hayır | Hayır | 14 | Evet |
| ::-webkit-scrollbar-thumb | Evet | Evet | Evet | Hayır | Hayır | 14 | Evet |
| ::-webkit-scrollbar-track | - | - | - | - | - | - | - |
| ::-webkit-scrollbar-track-piece | Evet | Evet | Evet | Hayır | Hayır | 14 | Evet |
| ::-webkit-scrollbar-corner | Evet | Evet | Evet | Hayır | Hayır | 14 | Evet |
| ::-webkit-resizer | Evet | Evet | Evet | Hayır | Hayır | 14 | Evet |
Tarayıcı Kaydırma Çubuğu için aramalar yaptım sizin sitenize denk geldim özellikle de hem yatay hem de dikey kaydırma çubuklarının birleştiği kaydırma çubuğunun alt köşesi için kod arıyordum aradığım şeyi buldum teşekkür ederim.
Ooo eski günler yine içerikler gelmeye başlamış. Tasarımın vazgeçilmesi scroll’un şeklidir. Kodlar için teşekkürler.
Seni burada tekrar görmek güzel :)
Tarayıcı kaydırma çubuğunun nasıl yapılacağını arayanlar için bilgilendirici bir yazı olmuş. Eskiden html kodlarla basit temalarımızı kendimiz yapardık. Oldukça fazla emek gerekiyor .
ben çok sevmek istanbul..yine gelecek ben :)) anlamıyorum bu bilgisayar dilinden…
Tarayıcı kaydırma çubuğu nasıl düzenlenir içeriğiniz benim için biraz komplike. Kodlama için bir süre önce ders almaya başladım ama henüz epeyce amatör olduğumdan danışmadan teknik işlemler yapmak biraz ürkütüyor beni.
Bu tür konularda daha hızlı yol kat etmeniz için korkmaksızın kodlar üzerinde oynamalar yapmalısınız. Yedek alarak yada ne yaptığınızı takip ederek hatalı yazımlardan sakınabilirsiniz.
Böyle kodlar siteyi yavaşaltıyor diye açıkçası pek olumlu bakmıyordum ama sizin sitenizdeki görünüşden sonra da bi etkilenmedim değil :)
Bu işlemi CSS yerine JS ile yapmış olsaydık temiz bir kod ve standart bir site için %0.1 ile %0.05 arası bir oranında yavaşlığa neden olur diyebilirdik. Ancak birkaç satır CSS’in kayda değer hiç bir zararı olmaz.
Kodlar için teşekkürler , ellerinize sağlık.
Kodlar hayatı okuyan insanları mutlu edebilen bir yapı teşekkürler
bu konuda ne kadar cahil olduğumu yazıyı okuyunca anladım. bende okuya okuya öğrenicem bu işi. teşekkürler.
kodlar çok faydalı olmuş teşekkürler :)
Bir sitede denk gelmiştim renklendirmiş ve ince hale getirmiş hatta gecikmeli aşağıya doğru iniyordu çok hoşuma gitmişti ama nasıl yapıldığı hakkında fikrim yoktu gezinirken konunuza denk geldim demekki böyle yapılıyormuş not aldım bunu kendi websitelerimde kullanmak isterim kesinlikle ayrı bir hava katıyor hatta sizin sitede de bu düzenlemeden yapılmış scroll kısmı önemli :)
Konuda paylaşılan CSS kodları sadece scrollbar’da işe yarıyor. Bahsettiğiniz gibi scrol hızında bir değişime neden olmuyor ve bununla ilgili değiller.
web sitelerinin tarayıcı uyumlu çalışması adına geliştirilmiş olan webkit komutunun kullanımı ile ilgili vermiş olduğunuz bilgiler için teşekkür ederim. sitenizi öğrencilerime kaynak site olarak veriyorum. aynı zamanda kısayollarıma da ekledim. iyi çalışmalar dilerim.
Güzel yorumunuz ve desteğiniz için teşekkürler. Sitede olmayan ancak olması gerektiğini düşündüğünüz bir içerik var ise bize iletişim formu vasıtasıyla iletirseniz en kısa sürede yarak daha fazla fayda sağlamaya çalışırız.
Merhaba. Faydalı bir yazı olmuş. Makalenizi okudum ve tarayıcım için kaydırma çubuğunu düzenleme ihtiyacıma çözüm olacak bir yazı ortaya çıkmış. Size bir sorum olacaktı. Chrome eklentisinin bilgisayarı yordugunu biliyoruz. Chrome tarayıcısı yerine önerebileceğiniz bilgisayarı az yoran tarayıcı var mı ve varsa hangisi? Bilgisayarımda SSD kullanıyorum ama yine de çok sekme de vs. harddiskimin ömrünü yemesini istemiyorum.
Bellek ve işlemci olacak güçlü bir sisteme sahip olduğum için ben Chrome’da fazla bellek tüketmesine rağmen gayet iyi sonuç elde ediyorum. Ancak size bu konuda Opera’yı tavsiye ederim. Daha düşük sistemlerde daha iyi performans sunduğunu düşünüyorum. Ayrıca az bilinen Maxthon tarayıcısı da bu konuda oldukça başarılı. Dahili bir çok özelliği ile eklenti kullanmaksızın daha fonksiyonel bir kullanım sunuyor. Mesela İndirme yöneticisi IDM’e gerek kalmaksızın bir çok videoyu indirebiliyor.
İlk önce bu kaynak ve kodlar için teşekkür ederim.Bu kodları kendi sitemde en yakın zamanda deneyeceğim. Olumlu gelişmeler olduğu taktirde yine bilgi veririm. Zaten bir sitede kaydırma çubuğu olmazsa olmazlardandır bence. Ayrıca, renginden boyutuna kadar her şeye değinmişsiniz Gayet iyi ve kaliteli bir kaynak olmuş ellerinize sağlık.