Barra di scorrimento CSS personalizzata per Firefox

Voglio personalizzare una barra di scorrimento con CSS.

Uso questo codice CSS WebKit, che funziona bene con Safari e Chrome:

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

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

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

Come posso fare la stessa cosa in Firefox?

So che posso farlo facilmente usando jQuery, ma preferirei farlo con CSS puro se è fattibile.

Sarei grato per il parere di un esperto!

A partire dalla fine del 2018, ora è disponibile una personalizzazione limitata in Firefox!

Vedi queste risposte:

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

E questo per informazioni di base: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109

Non esiste un equivalente di Firefox ::-webkit-scrollbare amici.

Dovrai attenersi a JavaScript.

Molte persone vorrebbero questa funzione, vedi: https://bugzilla.mozilla.org/show_bug.cgi?id=77790

Per quanto riguarda le sostituzioni JavaScript, puoi provare:

• https://github.com/mdbootstrap/perfect-scrollbar
• https://github.com/Grsmto/simplebar
• https://github.com/vitch/jScrollPane

Firefox 64 aggiunge il supporto per il progetto di specifiche CSS Barre di scorrimento modulo di livello 1 , che aggiunge due nuove proprietà di scrollbar-widthe scrollbar-colorche danno un po 'di controllo su come vengono visualizzate le barre di scorrimento.

È possibile impostare scrollbar-coloruno dei seguenti valori (descrizioni da MDN):

• auto Rendering predefinito della piattaforma per la parte della traccia della barra di scorrimento, in assenza di altre proprietà relative al colore della barra di scorrimento.
• dark Mostra una barra di scorrimento scura, che può essere una variante scura della barra di scorrimento fornita dalla piattaforma o una barra di scorrimento personalizzata con colori scuri.
• light Mostra una barra di scorrimento chiara, che può essere una variante leggera della barra di scorrimento fornita dalla piattaforma o una barra di scorrimento personalizzata con colori chiari.
• <color> <color> Applica il primo colore al pollice della barra di scorrimento, il secondo alla traccia della barra di scorrimento.

Si noti che darke i lightvalori non sono attualmente implementati in Firefox .

note macOS:

Le barre di scorrimento semitrasparenti che si nascondono automaticamente che sono l'impostazione predefinita macOS non possono essere colorate con questa regola (scelgono comunque il proprio colore contrastante in base allo sfondo). Vengono colorate solo le barre di scorrimento visualizzate permanentemente (Preferenze di Sistema> Mostra barre di scorrimento> Sempre).

Demo visiva:

.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>

È possibile impostare scrollbar-widthuno dei seguenti valori (descrizioni da MDN):

• auto La larghezza della barra di scorrimento predefinita per la piattaforma.
• thin Una variante di larghezza della barra di scorrimento sottile su piattaforme che forniscono tale opzione o una barra di scorrimento più sottile rispetto alla larghezza della barra di scorrimento della piattaforma predefinita.
• none Nessuna barra di scorrimento visualizzata, tuttavia l'elemento sarà comunque scorrevole.

È inoltre possibile impostare un valore di lunghezza specifico, in base alle specifiche. Entrambe thine una lunghezza specifica potrebbero non fare nulla su tutte le piattaforme e ciò che fa esattamente è specifico della piattaforma. In particolare, Firefox non sembra supportare attualmente un valore di lunghezza specifico ( questo commento sul loro bug tracker sembra confermarlo ). Il thinkeywork sembra comunque ben supportato, almeno con macOS e Windows.

Probabilmente vale la pena notare che l'opzione del valore di lunghezza e l'intera scrollbar-widthproprietà vengono prese in considerazione per la rimozione in una bozza futura e, in tal caso, questa particolare proprietà potrebbe essere rimossa da Firefox in una versione futura.

Demo visiva:

.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>

Posso offrire un'alternativa?

Nessuna sceneggiatura, solo stili CSS standardizzati e un po 'di creatività. Risposta breve: mascherare parti della barra di scorrimento del browser esistente, il che significa che si conserva tutta la sua funzionalità.

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

Per la demo e una spiegazione un po 'più approfondita, controlla qui ...

jsfiddle.net/aj7bxtjz/1/

Ho pensato di condividere le mie scoperte nel caso in cui qualcuno stia considerando un plugin JQuery per fare il lavoro.

Ho provato la barra di scorrimento personalizzata di JQuery . È piuttosto elegante e fa uno scorrimento regolare (con inerzia di scorrimento) e ha un sacco di parametri che puoi modificare, ma alla fine è stato un po 'troppo intenso per la CPU per me (e aggiunge una buona dose al DOM).

Ora sto provando Perfect Scrollbar . È semplice e leggero (6KB) e finora sta facendo un lavoro decente. Non richiede affatto CPU (per quanto ne so) e aggiunge molto poco al DOM. Ha solo un paio di parametri da modificare (wheelSpeed ​​e wheelPropagation), ma è tutto ciò di cui ho bisogno e gestisce bene gli aggiornamenti del contenuto a scorrimento (come caricare le immagini).

PS Ho dato una rapida occhiata a JScrollPane, ma @simone ha ragione, ora è un po 'datato e un PITA.

Da Firefox 64 , è possibile utilizzare nuove specifiche per un semplice stile della barra di scorrimento ( non completo come in Chrome con prefissi del fornitore ).

In questo esempio è possibile vedere una soluzione che combina regole diverse per indirizzare sia Firefox che Chrome con un risultato finale simile (non uguale) (ad esempio utilizzare le regole di Chrome originali):

Le regole chiave sono:

Per Firefox

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

Per Chrome

.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;
}

Tieni presente che, rispetto alla tua soluzione, è possibile utilizzare anche le regole di Chrome più semplici come le seguenti:

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

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

Infine, per nascondere le frecce nelle barre di scorrimento anche in Firefox, attualmente è necessario impostarlo come " sottile " con la seguente regolascrollbar-width: thin;

Anno 2020 funziona

/* 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

Funziona in stile utente e sembra non funzionare nelle pagine Web. Non ho trovato la direzione ufficiale di Mozilla su questo. Anche se potrebbe aver funzionato ad un certo punto, Firefox non ha supporto ufficiale per questo. Questo bug è ancora aperto 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;
}

consultare http://codemug.com/html/custom-scrollbars-using-css/ per i dettagli.

@-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;
    }
}