Kaydırma çubuğu - CSS Hileleri

Kaydırma çubuklarını şekillendirmenin kısa bir geçmişi:

Bu, yalnızca Internet Explorer'ın yapabileceği bir şeydi (eski sürümler) -ms-scrollbar-base-color. Bunlar artık yok.
Sonra WebKit tabanlı tarayıcı motorları gibi şeylerle çalışmaya başladı ::-webkit-scrollbar. Bu Alamanac girişinin, bugün Safari / Chrome ortamında çalıştığı için çoğunlukla kapsadığı şey budur.
Standartlar nihayet devreye girdi ve bu stil seçenekleri, kaydırma çubuğu-rengi ve kaydırma çubuğu genişliği gibi öneksiz özelliklerle kaplandı.

Safari / Chrome dünyası için stil kaydırma çubukları, -webkitsatıcı önekinin arkasında gösterilir .

Bu almanak girişi, özel kaydırma çubuklarıyla çalışmanın daha eksiksiz bir dökümü için bir genel bakıştır, lütfen bu CSS Hileleri makalesini okuyun.

body::-webkit-scrollbar ( width: 1em; ) body::-webkit-scrollbar-track ( box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); ) body::-webkit-scrollbar-thumb ( background-color: darkgrey; outline: 1px solid slategrey; )

Özellikler -webkit-scrollbarailesi, birlikte tam bir kaydırma çubuğu UI öğesi içeren yedi farklı sözde öğeden oluşur:

::-webkit-scrollbarçubuğun arka planını ele alır. Genellikle diğer unsurlarla kaplıdır
::-webkit-scrollbar-button kaydırma çubuğundaki yön düğmelerini ele alır
::-webkit-scrollbar-track ilerleme çubuğunun "altındaki" boş alanı gösterir
::-webkit-scrollbar-track-piece ilerleme çubuğunun sürüklenebilir kaydırma öğesi tarafından kapsanmayan en üst katmanıdır (başparmak)
::-webkit-scrollbar-thumb kaydırılabilir öğenin boyutuna bağlı olarak yeniden boyutlandırılan sürüklenebilir kaydırma öğesini ele alır
::-webkit-scrollbar-corner iki kaydırma çubuğunun karşılaşabileceği kaydırılabilir öğenin (genellikle) alt köşesini adresler
::-webkit-resizerscrollbar-cornerbazı öğelerin alt köşesinin üzerinde görünen sürüklenebilir yeniden boyutlandırma tutamacını adresler

Bu sözde öğelere ek olarak, gerekli olmayan ancak tasarımcılara kaydırma çubuğu kullanıcı arayüzünün çeşitli durumlarını ve etkileşimlerini biçimlendirme gücü sağlayan on bir sözde seçici sınıf da vardır. Sözde seçicilerin tam bir dökümü ve ayrıntılı bir örnek bu CSS Hileleri makalesinde bulunabilir.

Bu Kaleme bakın!

İlgi noktaları

Çeşitli sözde öğelerden önce niteleyici bir seçici yoksa, stiller sayfada görünebilecek herhangi bir kaydırma çubuğuna uygulanacaktır.
-webkit-scrollbarStilleri ayarlamak , web sayfanızı, kaydırma çubuklarının genellikle varsayılan olarak gizlendiği Lion'dan daha yeni Mac OS sürümlerinde yatay veya dikey kaydırma çubuklarını göstermeye zorlamanın iyi bir yoludur.
Bu özellik bir -webkitsatıcı önekinin arkasında olduğu için , birkaç jQuery eklentisi "çoklu doldurma" için yazılmıştır veya bu işlevi diğer tarayıcılara genişletmiştir. Böyle bir eklenti jScrollPane'dir.

Tarayıcı Desteği

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.