Firefox için Özel CSS Kaydırma Çubuğu

CSS ile bir kaydırma çubuğunu özelleştirmek istiyorum.

Safari ve Chrome için iyi çalışan bu WebKit CSS kodunu kullanıyorum:

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

::-webkit-scrollbar-track-piece  {
    background-color: #C2D2E4;
}

::-webkit-scrollbar-thumb:vertical {
    height: 30px;
    background-color: #0A4C95;
}

Aynı şeyi Firefox'ta nasıl yapabilirim?

Bunu jQuery kullanarak kolayca yapabileceğimi biliyorum, ancak yapılabilirse saf CSS ile yapmayı tercih ederim.

Birinin uzman tavsiyesi için minnettar olurum!

Community
Edited question 2018ööp0öö24 Temmuz 2018 в 12:00
Programlama
firefox css webkit scrollbar
2011ööp44öö1 Mayıs 2011 в 1:44
25 görünümler
Çözüm

2018'in sonlarından itibaren Firefox'ta artık sınırlı özelleştirme mevcut!

Şu cevaplara bakın:

Ve bu da arka plan bilgisi için: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109

::-webkit-scrollbar ve arkadaşlarının Firefox'ta bir karşılığı yok.

JavaScript ile devam etmeniz gerekecek.

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

JavaScript değiştirmeleri konusunda deneyebilirsiniz:

thirtydot
Edited answer 2019ösp56ös16 Ocak 2019 в 4:56
Yorumlar (17)

Bu işi yapmak için JQuery eklentisi kullanmayı düşünen birileri varsa diye bulgularımı paylaşmak istedim.

JQuery Custom Scrollbar](http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html)'ı denedim. Oldukça süslü ve düzgün kaydırma yapıyor (kaydırma eylemsizliği ile) ve ayarlayabileceğiniz bir sürü parametre var, ancak benim için biraz fazla CPU yoğun oldu (ve DOM'a oldukça fazla miktarda ekliyor).

Şimdi Perfect Scrollbar'ı deniyorum. Basit ve hafif (6KB) ve şimdiye kadar iyi bir iş çıkarıyor. Hiç CPU yoğun değil (söyleyebileceğim kadarıyla) ve DOM'unuza çok az şey ekliyor. Ayarlanacak sadece birkaç parametresi var (wheelSpeed ve wheelPropagation), ancak ihtiyacım olan tek şey bu ve kayan içerikteki güncellemeleri (resim yükleme gibi) güzel bir şekilde ele alıyor.

Not: JScrollPane'e hızlıca bir göz attım, ancak @simone haklı, artık biraz eski ve tam bir PITA.

Matthew
Edited answer 2017ööp21öö6 Ekim 2017 в 6:21
Yorumlar (4)

Kullanıcı tarzında çalışıyor ve web sayfalarında çalışmıyor gibi görünüyor. Mozilla'dan bu konuda resmi bir yönlendirme bulamadım. Bir noktada çalışmış olsa da, Firefox'un bunun için resmi desteği yok. Bu hata hala açık https://bugzilla.mozilla.org/show_bug.cgi?id=77790

scrollbar {
/*  clear useragent default style*/
   -moz-appearance: none !important;
}
/* buttons at two ends */
scrollbarbutton {
   -moz-appearance: none !important;
}
/* the sliding part*/
thumb{
   -moz-appearance: none !important;
}
scrollcorner {
   -moz-appearance: none !important;
   resize:both;
}
/* vertical or horizontal */
scrollbar[orient="vertical"] {
    color:silver;
}

ayrıntılar için http://codemug.com/html/custom-scrollbars-using-css/ adresini kontrol edin.

Adrian Rodriguez
Edited answer 2014ösp41ös20 Mayıs 2014 в 8:41
Yorumlar (5)