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

Firefox n'accepte que :

scrollbar-color: #F8F8F8 // Add your color
scroll-bar-width: thin/auto/none

Answer 2

2021

Firefox

.nav{
scrollbar-width: 0px;
scrollbar-width: none;}

Chrome

::-webkit-scrollbar {
  height: 0;  /* Remove scrollbar space */
  background: transparent;  
/* Optional: just make scrollbar invisible */
}

pour les barres de défilement verticales et horizontales, modifier l'attribut width ou height

Answer 3

La réponse est courte :

Uniquement le(s) travail(s) suivant(s)

dans firefox (à partir de JAN 2022) :

propriété (pas de pseudo-élément !)

valeurs autorisées

scrollbar-width

thin (en fait très mince)

auto (version standard épaisse)

none (masque la barre de défilement)

scrollbar-color

color color

Vous devez définir les deux valeurs de couleur, première barre de défilement pouce , deuxièmement l'arrière-plan de la barre de défilement . Il prend n'importe quelle valeur de couleur normale En effet, il utilise des noms comme "black", des valeurs hexagonales comme "#000000", des fonctions comme "rgb(0,0,0) ainsi que des variables comme "var(--previouslydefinedblack)". MAIS il ne prend pas en compte les gradients linéaires en entrée, ni normalement, ni via une variable css. L'ordre des propriétés n'a d'ailleurs aucune importance.

Answer 4

Cela fonctionne sur Wordpress Guys Custom CSS

/* Fire-Fox Scrollbar */
:root{
  scrollbar-face-color: rgb(176, 88, 54); /* Firefox 63 compatibility */
  scrollbar-track-color: rgb(51, 62, 72); /* Firefox 63 compatibility */
  scrollbar-color: rgb(176, 88, 54) rgb(51, 62, 72);
  scrollbar-width: auto;
}

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

Answer 5

Cela fonctionne dans le style utilisateur, mais ne semble pas fonctionner dans les pages web. Je n'ai pas trouvé de directives officielles 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;
}

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