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

12
Bir yorum yap yada bir soru sor.

avatar
10 Yorum konuları
2 Konu cevapları
0 Takipçiler
 
En çok beğenilen yorum dizilişi
En iyi yorum dizilişi
11 Yorum yazarları
KübraahutolumeditorcumAli Yatarkalkmaz Son yorum yazarları
  Yorumlara Abone Ol  
Önce Yeniler Önce Eskiler Önce Beğenilenler
Bildir
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 :)