Barre de défilement CSS personnalisée pour Firefox

Je souhaite personnaliser une barre de défilement avec 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 faisable.

Serait reconnaissant pour les conseils d'experts de quelqu'un!

À la fin de 2018, il y a maintenant une personnalisation limitée disponible dans Firefox!

Voir ces réponses:

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

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

Il n'y a pas d'équivalent Firefox ::-webkit-scrollbaret amis.

Vous devrez vous en tenir à JavaScript.

Beaucoup de gens aimeraient cette fonctionnalité, voir: https://bugzilla.mozilla.org/show_bug.cgi?id=77790

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

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

Firefox 64 ajoute la prise en charge du projet de spécification CSS Scrollbars Module Level 1 , qui ajoute deux nouvelles propriétés de scrollbar-widthet scrollbar-colorqui donnent un certain contrôle sur la façon dont les barres de défilement sont affichées.

Vous pouvez définir l' scrollbar-colorune des valeurs suivantes (descriptions de MDN):

• auto Rendu de plate-forme par défaut pour la partie piste de la barre de défilement, en l'absence de toute autre propriété de couleur de barre de défilement associée.
• dark Affichez une barre de défilement sombre, qui peut être soit une variante sombre de la barre de défilement fournie par la plateforme, soit une barre de défilement personnalisée avec des couleurs sombres.
• light Affichez une barre de défilement claire, qui peut être soit une variante légère de la barre de défilement fournie par la plateforme, soit une barre de défilement personnalisée avec des couleurs claires.
• <color> <color> Applique la première couleur au curseur de la barre de défilement, la seconde à la piste de la barre de défilement.

Notez que darket les lightvaleurs ne sont actuellement pas implémentées dans Firefox .

notes macOS:

Les barres de défilement semi-transparentes à masquage automatique qui sont la valeur par défaut de macOS ne peuvent pas être colorées avec cette règle (elles choisissent toujours leur propre couleur contrastante en fonction de l'arrière-plan). Seules les barres de défilement affichées en permanence (Préférences Système> Afficher les barres de défilement> Toujours) sont colorées.

Démo 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 l' scrollbar-widthune des valeurs suivantes (descriptions de MDN):

• auto Largeur de barre de défilement par défaut pour la plate-forme.
• thin Une variante de largeur de barre de défilement mince sur les plates-formes qui fournissent cette option, ou une barre de défilement plus fine que la largeur de barre de défilement de plate-forme par défaut.
• none Aucune barre de défilement n'est affichée, mais l'élément sera toujours défilable.

Vous pouvez également définir une valeur de longueur spécifique, selon les spécifications. Les deux thinet une longueur spécifique peuvent ne rien faire sur toutes les plates-formes, et ce qu'il fait exactement est spécifique à la plate-forme. En particulier, Firefox ne semble pas actuellement prendre en charge une valeur de longueur spécifique ( ce commentaire sur leur bug tracker semble le confirmer ). thinCependant, le travail de clé semble bien pris en charge, avec au moins macOS et Windows.

Il convient probablement de noter que l'option de valeur de longueur et la scrollbar-widthpropriété entière sont envisagées pour la suppression dans un futur brouillon, et si cela se produit, cette propriété particulière peut être supprimée de Firefox dans une future version.

Démo 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>

Puis-je proposer une alternative?

Aucun script du tout, seulement des styles CSS normalisés et un peu de créativité. Réponse courte - masquer des parties de la barre de défilement du navigateur existant, 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 une démonstration et une explication un peu plus approfondie, cliquez ici ...

jsfiddle.net/aj7bxtjz/1/

J'ai pensé partager mes découvertes au cas où quelqu'un envisagerait un plugin JQuery pour faire le travail.

J'ai essayé JQuery Custom Scrollbar . C'est assez sophistiqué et fait un défilement fluide (avec une inertie de défilement) et a beaucoup de paramètres que vous pouvez modifier, mais cela a fini par être un peu trop gourmand en CPU pour moi (et cela ajoute une bonne quantité au DOM).

Maintenant, je donne un coup de pouce à Perfect Scrollbar . Il est simple et léger (6 Ko) et il fait jusqu'à présent un travail décent. Ce n'est pas du tout gourmand en CPU (pour autant que je sache) et ajoute très peu à votre DOM. Il n'a que quelques paramètres à modifier (wheelSpeed ​​et wheelPropagation), mais c'est tout ce dont j'ai besoin et il gère très bien les mises à jour du contenu de défilement (comme le chargement d'images).

PS J'ai jeté un coup d'œil à JScrollPane, mais @simone a raison, c'est un peu daté maintenant et un PITA.

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

Dans cet exemple, il est possible de voir une solution qui combine différentes règles pour adresser à la fois Firefox et Chrome avec un résultat final similaire (différent) (par exemple, utilisez vos règles Chrome d'origine):

Les règles clés 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 qu'en ce qui concerne votre solution, il est possible d'utiliser des règles Chrome plus simples comme suit:

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

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

Enfin, afin de 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 suivantescrollbar-width: thin;

Année 2020 ça marche

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

Il fonctionne à la manière de l'utilisateur et ne semble pas fonctionner dans les pages Web. Je n'ai pas trouvé de direction officielle de Mozilla à ce sujet. Bien que cela ait pu fonctionner à un moment donné, Firefox n'a pas de support officiel pour cela. Ce bogue est toujours ouvert 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;
}

consultez http://codemug.com/html/custom-scrollbars-using-css/ pour plus de détails.

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