Barre de défilement CSS personnalisée pour Firefox

Question

Je souhaite personnaliser une barre de défilement à l'aide de CSS.

J'utilise ce code CSS WebKit, qui fonctionne bien pour Safari et Chrome :

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

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

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

Comment puis-je faire la même chose dans Firefox ?

Je sais que je peux facilement le faire en utilisant jQuery, mais je préférerais le faire avec du CSS pur si c'est possible.

Answer 1

Depuis fin 2018, la personnalisation disponible dans Firefox est désormais limitée !

Voir ces réponses :

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

Et ceci pour les informations de base : https://bugzilla.mozilla.org/show_bug.cgi?id=1460109

---

Il n'y a pas d'équivalent Firefox à ::-webkit-scrollbar et ses amis.

Vous devrez vous en tenir à JavaScript.

De nombreuses personnes souhaiteraient bénéficier de cette fonctionnalité : https://bugzilla.mozilla.org/show_bug.cgi?id=77790

---

En ce qui concerne les remplacements de JavaScript, vous pouvez essayer :

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

Answer 2

Firefox 64 ajoute la prise en charge du projet de spécification Module CSS Scrollbars Niveau 1 qui ajoute deux nouvelles propriétés de scrollbar-width y scrollbar-color qui permettent de contrôler l'affichage des barres de défilement.

Vous pouvez définir scrollbar-color à l'une des valeurs suivantes (descriptions tirées de MDN) :

• auto Rendu par défaut de la plate-forme pour la partie piste de la barre de défilement, en l'absence de toute autre propriété de couleur de la barre de défilement.
• <color> <color> Applique la première couleur au pouce de la barre de défilement, la seconde à la piste de la barre de défilement.

Auparavant, le cahier des charges comprenait dark y light valeurs ce que n'ont pas été implémentées dans Firefox . Ces valeurs ont depuis été supprimées de la spécification.

De plus, dans les versions antérieures à 99.0 de macOS Firefox, les barres de défilement semi-transparentes à masquage automatique, qui sont le mode par défaut de macOS, ne pouvaient pas être stylisées par ces règles. Depuis Firefox 99.0, tous les modes de barres de défilement de macOS (configurés sous Préférences système > Afficher les barres de défilement) peuvent être colorés.

Démonstration visuelle :

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

Vous pouvez définir scrollbar-width à l'une des valeurs suivantes (descriptions tirées de MDN) :

• auto Largeur de la barre de défilement par défaut pour la plate-forme.
• thin Une variante de largeur de barre de défilement fine sur les plateformes qui offrent cette option, ou une barre de défilement plus fine que la largeur de barre de défilement par défaut de la plateforme.
• none Aucune barre de défilement n'est affichée, mais l'élément peut toujours être défilé.

Vous pouvez également définir une valeur de longueur spécifique, en fonction des spécifications. Les deux thin et une longueur spécifique peut ne rien faire sur toutes les plateformes, et ce qu'elle fait exactement est spécifique à la plateforme. En particulier, Firefox ne semble pas supporter actuellement une valeur de longueur spécifique ( ce commentaire sur leur bug tracker semble le confirmer ). Les thin Keywork semble toutefois bien pris en charge, du moins sous macOS et Windows.

Il est probablement utile de noter que l'option de la valeur de la longueur et l'ensemble de la fonction scrollbar-width sont envisagées pour être supprimées dans un futur projet, et si cela se produit, cette propriété particulière pourrait être supprimée de Firefox dans une future version.

Démonstration visuelle :

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

Answer 3

Depuis Firefox 64 Il est possible d'utiliser nouvelles spécifications pour une simple barre de défilement ( pas aussi complet que dans Chrome avec les préfixes des fournisseurs ).

En cet exemple Il est possible de trouver une solution qui combine différentes règles pour traiter à la fois Firefox et Chrome avec un résultat final similaire (mais pas égal) (par exemple, utilisez vos règles originales pour Chrome) :

Les règles essentielles sont les suivantes :

Pour Firefox

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

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

Veuillez noter que, dans le respect de votre solution, il est possible d'utiliser des règles Chrome plus simples comme celles qui suivent :

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

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

Enfin, pour masquer les flèches dans les barres de défilement également dans Firefox, il est actuellement nécessaire de le définir comme " mince "avec la règle suivante scrollbar-width: thin;

Answer 4

Puis-je proposer une alternative ?

Pas de script, seulement des styles css standardisés et un peu de créativité. En bref, il s'agit de masquer des parties de la barre de défilement existante du navigateur, ce qui signifie que vous conservez toutes ses fonctionnalités.

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

Pour la démo et une explication un peu plus approfondie, voir ici...

jsfiddle.net/aj7bxtjz/1/

Answer 5

Année 2020 : ce système fonctionne

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