it-swarm-eu.dev

Barra di scorrimento CSS personalizzata per Firefox

Voglio personalizzare una barra di scorrimento con CSS.

Uso questo codice CSS WebKit, che funziona bene per 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 di qualcuno!

265

Alla fine del 2018, ora è disponibile una personalizzazione limitata in Firefox!

Vedi queste risposte:

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


Non esiste Firefox equivalente a ::-webkit-scrollbar e agli amici.

Dovrai rimanere con JavaScript.

Un sacco di gente vorrebbe questa funzione, vedi: https://bugzilla.mozilla.org/show_bug.cgi?id=77790


Per quanto riguarda le sostituzioni JavaScript, puoi provare:

206
thirtydot

Posso offrire un'alternativa?

Nessun tipo di scripting, solo stili css standardizzati e un po 'di creatività. Risposta breve: mascheramento delle parti della barra di scorrimento del browser esistente, il che significa che manterrai tutte le sue 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/

41
Tomaz

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

Ho dato JQuery Custom Scrollbar a go. È piuttosto elaborato e ha uno scorrimento fluido (con inerzia di scorrimento) e ha un sacco di parametri che puoi modificare, ma alla fine è diventato un po 'troppo intenso per la CPU (e aggiunge una buona quantità al DOM).

Ora sto dando Perfect Scrollbar a go. È semplice e leggero (6 KB) e sta facendo un lavoro decente finora. Non è affatto CPU (per quanto ne so) e aggiunge molto poco al tuo DOM. Ha solo un paio di parametri per Tweak (wheelSpeed ​​e wheelPropagation), ma è tutto ciò di cui ho bisogno e gestisce gli aggiornamenti del contenuto scorrevole piacevolmente (come il caricamento delle immagini).

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

35
Markus Coetzee

Firefox 64 aggiunge il supporto per la bozza specifica Modulo Scrollbar CSS Livello 1 , che aggiunge due nuove proprietà di scrollbar-width e scrollbar-color che danno un certo controllo come vengono visualizzate le barre di scorrimento.

È possibile impostare scrollbar-color su uno dei seguenti valori (descrizioni da MDN):

  • auto Rendering di piattaforma predefinito per la porzione di traccia della barra di scorrimento, in assenza di altre proprietà relative ai colori 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 leggera, 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.

Nota che i valori dark e lightnon sono attualmente implementati in Firefox .

note macOS:

Le barre di scorrimento semi-trasparenti che nascondono automaticamente quelle predefinite di macOS non possono essere colorate con questa regola (scelgono comunque il proprio colore di contrasto in base allo sfondo). Solo le barre di scorrimento che mostrano in modo permanente (Preferenze di sistema> Mostra barre di scorrimento> Sempre) sono colorate.

Demo visuale:

.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-width su uno dei seguenti valori (descrizioni da MDN):

  • auto La larghezza della barra di scorrimento predefinita per la piattaforma.
  • thin Una variante della 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 mostrata, tuttavia l'elemento sarà ancora scorrevole.

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

Probabilmente vale la pena notare che l'opzione del valore della lunghezza e l'intera proprietà scrollbar-width vengono considerate per la rimozione in una bozza futura e, se ciò accade, questa particolare proprietà potrebbe essere rimossa da Firefox in una versione futura.

Demo visuale:

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

Poiché Firefox 64 , è possibile utilizzare nuove specifiche per una semplice barra di scorrimento styling ( non completo come in Chrome con prefissi fornitore .

In questo esempio è possibile vedere una soluzione che combina diverse regole per affrontare sia Firefox che Chrome con un risultato finale simile (non uguale) (ad esempio, usa il tuo regole originali di Chrome):

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

Per quanto riguarda la soluzione, è possibile utilizzare anche le regole di Chrome più semplici come segue:

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

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

Infine, al fine di nascondere le frecce nelle scrollbar anche in Firefox, al momento è necessario impostarlo come " thin " con la seguente regola scrollbar-width: thin;

12
Luca Detomi

Funziona in stile utente e sembra non funzionare nelle pagine web. Non ho trovato la direzione ufficiale da Mozilla su questo. Anche se potrebbe aver funzionato a un certo punto, Firefox non ha il 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;
}

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

0
ipirlo
@-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;
    }
}
0
ramme