CSS div özelleştirilmiş kaydırma çubuğu

Nasıl 3* *bir CSS (Basamaklı Stil Sayfaları) kaydırma çubuğu özelleştirebilirsiniz ben tüm sayfayı değil mi?

CEVAP

4 Ocak 2013, Cuma

Kaydırma çubukları, CSS ve tarayıcı uyumluluk hakkında en son bilgileri pekiştirmek için faydalı olacağını düşündüm.

Kaydırma Çubuğu CSS Desteği

Şu anda, çapraz tarayıcı kaydırma çubuğu CSS stil tanımları vardır. The W3C article sonunda bahsettiğim şu ifade var ve son zamanlarda (Cuma 10 Ekim 2014 03:09:48 CEST) güncellendi:

Bazı tarayıcılar (IE, Konqueror) standart olmayan özellikleri desteği 'kaydırma çubuğu-gölge-renk kaydırma-track-color' ve diğerleri.'Bu yasa dışı özellikleri vardır: her CSS şeklinde değilse ne ne de özel olarak işaretlenir onlar belirtimi (başlatılması yeterli olurdu "-satıcı")

Microsoft

Diğerleri sözü, Microsoft supports scroll bar styling (example) ama, IE8 ve üstü için var.

http://msdn.microsoft.com/en-us/library/ie/hh772048(v=vs.85).aspx
http://msdn.microsoft.com/en-us/library/ff974092(v=VS.85).aspx

Örnek:

.TA {
    scrollbar-3dlight-color:gold;
    scrollbar-arrow-color:blue;
    scrollbar-base-color:;
    scrollbar-darkshadow-color:blue;
    scrollbar-face-color:;
    scrollbar-highlight-color:;
    scrollbar-shadow-color:
}

Chrome & Safari (y)

Benzer şekilde, y şimdi kendi sürümü vardır:

Stil Kaydırma Çubukları: https://www.webkit.org/blog/363/styling-scrollbars/
Demo of all webkit scroll bar styling

Custom Scrollbars in WebKit ilgili CSS:

/* pseudo elements */
::-webkit-scrollbar              {  }
::-webkit-scrollbar-button       {  }
::-webkit-scrollbar-track        {  }
::-webkit-scrollbar-track-piece  {  }
::-webkit-scrollbar-thumb        {  }
::-webkit-scrollbar-corner       {  }
::-webkit-resizer                {  }

/* pseudo class selectors */
:horizontal
:vertical
:decrement
:increment
:start
:end 
:double-button
:single-button
:no-button
:corner-present
:window-inactive

Firefox (Gecko)

Firefox kaydırma çubuğu stilleri kendi sürümü yok Custom CSS Scrollbar for Firefox according to this SO answer.

Gecko ::-webkit-scrollbar ve arkadaşları eşdeğeri yok.

JQuery ile sopa gerekir.

Pek çok insan bu özelliği, bkz: istiyor< / ^ br . https://bugzilla.mozilla.org/show_bug.cgi?id=77790

Bu rapor için soruyorsun aynı şeyi istiyor: https://bugzilla.mozilla.org/show_bug.cgi?id=547260

Çapraz tarayıcı Kaydırma Çubuğu Şekillendirme

JavaScript kütüphaneleri ve eklentileri tarayıcılar arası bir çözüm sağlayabilir. Birçok seçenek vardır.

20 jQuery Scrollbar plugin with examples (24 Temmuz 2012)
30 Javascript/Ajax Techniques for Sliders, Scrollers and Scrollbars (07 Mayıs 2008)
21 Useful Scrollbar CSS/JavaScript Styling Tutorials (Ağustos, 2012)
26* *(26 Ağustos 2012)

Listede gidebiliriz. En iyi bahis etrafında arama, araştırma ve mevcut çözümleri test etmektir. İhtiyaçlarınıza uyacak bir şey bulmak mümkün olacak eminim.

Yasadışı Kaydırma Çubuğu Şekillendirme Önlemek

Her ihtimale karşı düzgün bir "satıcı", this article over at W3C provides some basic instructions. öneki olmamıştır kaydırma çubuğu şekillendirme önlemek istiyorsanız Temelde, kullanıcı stil sayfası tarayıcınız ile ilgili aşağıdaki CSS eklemek gerekir. Bu tanımlar ziyaret ettiğiniz herhangi bir sayfada kaydırma çubuğu stil geçersiz kılar.

body, html {
  scrollbar-face-color: ThreeDFace !important;
  scrollbar-shadow-color: ThreeDDarkShadow !important;
  scrollbar-highlight-color: ThreeDHighlight !important;
  scrollbar-3dlight-color: ThreeDLightShadow !important;
  scrollbar-darkshadow-color: ThreeDDarkShadow !important;
  scrollbar-track-color: Scrollbar !important;
  scrollbar-arrow-color: ButtonText !important;
}