Tarayıcı Kaydırma Çubuğu ::-webkit-scrollbar Nasıl Düzenlenir?

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
Google Chrome Microsoft Edge Mozilla Firefox Opera Safari Internet Explorer
::-webkit-scrollbarEvetHayırHayır15EvetHayır
::-webkit-scrollbar-buttonEvetHayırHayır15EvetHayır
::-webkit-scrollbar-thumbEvetHayırHayır15EvetHayır
::-webkit-scrollbar-track------
::-webkit-scrollbar-track-pieceEvetHayırHayır15EvetHayır
::-webkit-scrollbar-cornerEvetHayırHayır15EvetHayır
::-webkit-resizerEvetHayırHayır15EvetHayır
Mobil Tarayıcılar
Seçiciler Android Webview Samsung İnternet Google Chrome Microsoft Edge Mozilla Firefox Opera Safari
::-webkit-scrollbarEvetEvetEvetHayırHayır14Evet
::-webkit-scrollbar-buttonEvetEvetEvetHayırHayır14Evet
::-webkit-scrollbar-thumbEvetEvetEvetHayırHayır14Evet
::-webkit-scrollbar-track-------
::-webkit-scrollbar-track-pieceEvetEvetEvetHayırHayır14Evet
::-webkit-scrollbar-cornerEvetEvetEvetHayırHayır14Evet
::-webkit-resizerEvetEvetEvetHayırHayır14Evet

20
Bir yorum yap yada bir soru sor.

avatar
14 Yorum konuları
6 Konu cevapları
0 Takipçiler
 
En çok beğenilen yorum dizilişi
En iyi yorum dizilişi
15 Yorum yazarları
FatihÜsküdaruzmanındanHalilKübra Son yorum yazarları
  Yorumlara Abone Ol  
Önce Yeniler Önce Eskiler Önce Beğenilenler
Bildir
uzmanından
uzmanından

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.

cem halil
cem halil

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.

Furkan Yurdakul
Furkan Yurdakul

Ooo eski günler yine içerikler gelmeye başlamış. Tasarımın vazgeçilmesi scroll’un şeklidir. Kodlar için teşekkürler.

Safagindunyasi
Safagindunyasi

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 .

SEVDA
SEVDA

ben çok sevmek istanbul..yine gelecek ben :)) anlamıyorum bu bilgisayar dilinden…

Shoepera Türkiye Yüksek Ökçeler Kulübü
Shoepera Türkiye Yüksek Ökçeler Kulübü

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.

Ali Yatarkalkmaz
Ali Yatarkalkmaz

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 :)

editorcum
editorcum

Kodlar için teşekkürler , ellerinize sağlık.

tolum
tolum

Kodlar hayatı okuyan insanları mutlu edebilen bir yapı teşekkürler

ahu
ahu

bu konuda ne kadar cahil olduğumu yazıyı okuyunca anladım. bende okuya okuya öğrenicem bu işi. teşekkürler.

Kübra
Kübra

kodlar çok faydalı olmuş teşekkürler :)

Halil
Halil

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 :)

Üsküdar
Üsküdar

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.

Fatih
Fatih

İ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.