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?

Ben kolayca jQuery kullanarak yapabilirim biliyorum, ama eğer yapılabilir saf CSS ile yapmayı tercih ederim.

Birinin uzman tavsiyesi için minnettar olurum!

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

Şu cevaplara bakın:

• https://stackoverflow.com/a/54101063/405015
• https://stackoverflow.com/a/53739309/405015

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

::-webkit-scrollbarVe arkadaşlarına eşdeğer bir Firefox yok .

JavaScript kullanmaya devam etmelisiniz.

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

JavaScript değiştirmeleri ile ilgili olarak şunları deneyebilirsiniz:

• https://github.com/noraesae/perfect-scrollbar
• https://github.com/jnicol/trackpad-scroll-emulator
• https://github.com/vitch/jScrollPane (ancak eski ve görünüşte bir PITA ...)

Firefox 64 Spec taslak için destek ekler CSS Scrollbars Modülü Seviye 1 ekler, iki yeni özellikler arasında scrollbar-widthvescrollbar-color kaydırma çubukları nasıl görüntüleneceğini üzerinde bir miktar kontrol sağlar.

scrollbar-colorAşağıdaki değerlerden birine (MDN'den açıklamalar) ayarlayabilirsiniz :

• auto İlgili diğer kaydırma çubuğu renk özelliklerinin yokluğunda, kaydırma çubuğunun parça kısmı için varsayılan platform oluşturma.
• dark Platform tarafından sağlanan kaydırma çubuğunun koyu bir çeşidi veya koyu renklerle özel bir kaydırma çubuğu olabilecek koyu bir kaydırma çubuğu gösterin.
• light Platform tarafından sağlanan kaydırma çubuğunun hafif bir değişkeni veya açık renklerle özel bir kaydırma çubuğu olabilecek hafif bir kaydırma çubuğu gösterin.
• <color> <color> İlk rengi kaydırma çubuğu başparmağına, ikinci rengi kaydırma çubuğu parçasına uygular.

darkVe lightdeğerlerin şu anda Firefox'ta uygulanmadığını unutmayın .

macOS notları:

MacOS varsayılanı olan otomatik gizlenen yarı saydam kaydırma çubukları bu kuralla renklendirilemez (yine de arka plana göre kendi kontrast renklerini seçerler). Yalnızca kalıcı olarak gösterilen kaydırma çubukları (Sistem Tercihleri> Kaydırma Çubuklarını Göster> Her Zaman) renklendirilir.

Görsel Demo:

.scroll {
  width: 20%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-color-auto {
  scrollbar-color: auto;
}
.scroll-color-dark {
  scrollbar-color: dark;
}
.scroll-color-light {
  scrollbar-color: light;
}
.scroll-color-colors {
  scrollbar-color: orange lightyellow;
}

<div class="scroll scroll-color-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>

<div class="scroll scroll-color-dark">
<p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p>
</div>

<div class="scroll scroll-color-light">
<p>light</p><p>light</p><p>light</p><p>light</p><p>light</p><p>light</p>
</div>

<div class="scroll scroll-color-colors">
<p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p>
</div>

scrollbar-widthAşağıdaki değerlerden birine (MDN'den açıklamalar) ayarlayabilirsiniz :

• auto Platform için varsayılan kaydırma çubuğu genişliği.
• thin Bu seçeneği sunan platformlarda ince kaydırma çubuğu genişliği varyasyonu veya varsayılan platform kaydırma çubuğu genişliğinden daha ince bir kaydırma çubuğu.
• none Hiçbir kaydırma çubuğu gösterilmez, ancak öğe yine de kaydırılabilir.

Spesifikasyona göre belirli bir uzunluk değeri de ayarlayabilirsiniz. Her ikisi de thinve belirli bir uzunluk tüm platformlarda hiçbir şey yapmayabilir ve tam olarak yaptığı şey platforma özgüdür. Özellikle, Firefox şu anda belirli bir uzunluk değerini desteklemiyor gibi görünüyor ( hata izleyicilerindeki bu yorum bunu onaylıyor gibi görünüyor ). thinKeywork at-az MacOS ve Windows desteği ile, ne kadar iyi desteklenmeye görünmüyor.

Büyük olasılıkla, uzunluk değeri seçeneğinin ve tüm scrollbar-widthözelliğin gelecekteki bir taslakta kaldırılmaya çalışıldığını ve bu özelliğin gelecekteki bir sürümde Firefox'tan kaldırılabileceğini belirtmek gerekir.

Görsel Demo:

.scroll {
  width: 30%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-width-auto {
  scrollbar-width: auto;
}
.scroll-width-thin {
  scrollbar-width: thin;
}
.scroll-width-none {
  scrollbar-width: none;
}

<div class="scroll scroll-width-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>

<div class="scroll scroll-width-thin">
<p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p>
</div>

<div class="scroll scroll-width-none">
<p>none</p><p>none</p><p>none</p><p>none</p><p>none</p><p>none</p>
</div>

Bir alternatif sunabilir miyim?

Herhangi bir komut dosyası yok, sadece standartlaştırılmış css stilleri ve biraz yaratıcılık. Kısa cevap - mevcut tarayıcı kaydırma çubuğunun parçalarını maskelemek, bu da tüm işlevlerini korumanız anlamına gelir.

.scroll_content {
    position: relative;
    width: 400px;
    height: 414px;
    top: -17px;
    padding: 20px 10px 20px 10px;
    overflow-y: auto;
}

Demo ve biraz daha ayrıntılı açıklama için buraya bakın ...

jsfiddle.net/aj7bxtjz/1/

Birinin işi yapmak için bir JQuery eklentisi düşünmesi durumunda bulgularımı paylaşacağımı düşündüm.

JQuery Özel Kaydırma Çubuğu verdim gitmek. Oldukça süslü ve pürüzsüz kaydırma (kaydırma ataleti ile) yapıyor ve tweak yapabileceğiniz çok sayıda parametre var, ama benim için biraz fazla CPU yoğun oldu (ve DOM'a adil bir miktar ekliyor).

Şimdi Perfect Scrollbar'ı deniyorum . Basit ve hafif (6KB) ve şu ana kadar iyi bir iş çıkarıyor. CPU yoğun değil (anlayabildiğim kadarıyla) ve DOM'nize çok az şey katıyor. Tweak yapmak için sadece birkaç parametre var (wheelSpeed ​​ve wheelPropagation), ancak ihtiyacım olan tek şey ve kaydırma içeriğinin güncellemelerini güzelce işliyor (görüntü yükleme gibi).

PS JScrollPane hızlı bir göz var mı, ama @simone doğru, şimdi biraz tarihli ve bir PITA.

Yana Firefox 64 , kullanmak mümkündür yeni özelliklerini basit bir kaydırma çubuğu stil (için satıcı öneklerle Chrome'da olduğu kadar tam değil ).

Gelen bu örnekte nihai (eşit değil) benzer sonuç (örnek kullanımı orijinal Chrome kuralları) adres Firefox ve Chrome hem farklı kurallar birleştiren bir çözüm görmek mümkündür:

Anahtar kurallar:

Firefox için

.scroller {
  overflow-y: scroll;
  scrollbar-color: #0A4C95 #C2D2E4;
}

Chrome için

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

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

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

Çözümünüze saygı duymanın, aşağıdaki gibi daha basit Chrome kurallarını kullanmanın mümkün olduğunu lütfen unutmayın:

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

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

Son olarak, Firefox'ta da kaydırma çubuklarındaki okları gizlemek için, şu anda aşağıdaki kuralla " ince " olarak ayarlamak gerekir.scrollbar-width: thin;

Yıl 2020 bu işe yarıyor

/* Thin Scrollbar */
:root{
  scrollbar-color: rgb(210,210,210) rgb(46,54,69) !important;
  scrollbar-width: thin !important;
}

https://github.com/Aris-t2/CustomCSSforFx/issues/160

Kullanıcı tarzında çalışır ve web sayfalarında çalışmıyor gibi görünüyor. Bu konuda Mozilla'dan resmi bir yön bulamadım. Bir noktada işe yaramış olsa da, Firefox'un bunun için resmi desteği yoktur. 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;
}

kontrol http://codemug.com/html/custom-scrollbars-using-css/ detaylar için.

@-moz-document url-prefix(http://),url-prefix(https://) {
    scrollbar {
       -moz-appearance: none !important;
       background: rgb(0,255,0) !important;
    }
    thumb,scrollbarbutton {
       -moz-appearance: none !important;
       background-color: rgb(0,0,255) !important;
    }

    thumb:hover,scrollbarbutton:hover {
       -moz-appearance: none !important;
       background-color: rgb(255,0,0) !important;
    }
    scrollbarbutton {
       display: none !important;
    }
    scrollbar[orient="vertical"] {
      min-width: 15px !important;
    }
}