Barre de défilement CSS personnalisée pour Firefox

Je veux 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&#8217est faisable.

Je serais reconnaissant à quelqu'un de me donner un avis d'expert !

Community
Question modifiée 12 juillet 2018 в 12:00
Programmation
firefox css webkit scrollbar
29 mai 2011 в 1:44
24 vues
Solution

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

Voir ces réponses :

Et ceci pour des informations générales : 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.

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

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

thirtydot
Réponse modifiée 9 janvier 2019 в 4:56
Commentaires (17)

J'ai pensé que je pourrais partager mes conclusions au cas où quelqu'un envisagerait d'utiliser un plugin JQuery pour faire le travail.

J'ai essayé [JQuery Custom Scrollbar] (http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html). Elle est assez sophistiquée et permet un défilement fluide (avec une inertie de défilement) et possède de nombreux paramètres que vous pouvez régler, mais elle s'est avérée un peu trop gourmande en ressources CPU pour moi (et elle ajoute une quantité considérable au DOM).

J'ai donc décidé d'essayer [Perfect Scrollbar] (http://utatti.github.io/perfect-scrollbar/). Elle est simple et légère (6KB) et fait un bon travail jusqu'à présent. Elle n'est pas du tout gourmande en ressources CPU (pour autant que je puisse en juger) et n'ajoute que très peu à votre DOM. Il n'y a que quelques paramètres à régler (wheelSpeed et wheelPropagation), mais c'est tout ce dont j'ai besoin et il gère bien les mises à jour du contenu défilant (comme le chargement des images).

P.S. J'ai jeté un coup d'œil rapide à JScrollPane, mais @simone a raison, il est un peu dépassé et constitue un véritable casse-tête.

Matthew
Réponse modifiée 30 octobre 2017 в 6:21
Commentaires (4)

Cela fonctionne dans le style utilisateur, et cela semble ne 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;
}

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

Adrian Rodriguez
Réponse modifiée 29 mai 2014 в 8:41
Commentaires (5)