Custom Scrollbar CSS 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’est faisable.

Serait reconnaissant pour le conseil d’expert de quelqu’un!

Il n’y a pas d’équivalent de Firefox à ::-webkit-scrollbar et friends.

Vous devrez restr avec JavaScript.

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

Ce rapport demande exactement la même chose que vous demandez: https://bugzilla.mozilla.org/show_bug.cgi?id=547260

Il a été fermé en double du premier rapport auquel je suis lié.

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

https://github.com/noraesae/perfect-scrollbar
https://github.com/jnicol/trackpad-scroll-emulator
https://github.com/vitch/jScrollPane (mais c’est dépassé et apparemment un PITA …)

Puis-je offrir une alternative?

Pas de script que ce soit, seulement des styles CSS standardisés et un peu de créativité. Réponse courte – masquage de certaines parties de la barre de défilement 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 une démonstration et un peu plus d’explications, cochez 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 donné ma chance à JQuery Custom Scrollbar . C’est assez sophistiqué et fait un défilement en douceur (avec l’inertie du défilement) et a beaucoup de parameters que vous pouvez modifier, mais cela a fini par être un peu trop intensif en processeur pour moi (et cela ajoute beaucoup au DOM).

Maintenant, je donne un coup de barre à Perfect Scrollbar . C’est simple et léger (6 Ko) et ça fait un travail décent jusqu’ici. Ce n’est pas du tout un processeur (pour autant que je sache) et ajoute très peu à votre DOM. Il n’a que quelques parameters à 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 du défilement (comme le chargement des images).

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

2018 Les barres de défilement de Firefox semblent toujours aussi mauvaises que 1992, c’est un PITA, mais nous pouvons maintenant utiliser des filtres css dessus.

Voici un exemple avec une teinte commune compatible avec les navigateurs verdâtres.

Utiliser à bon escient

 div { max-height: 200px; max-width: 80%; overflow-x: hidden; overflow-y: scroll; filter: sepia(100%) saturate(360%) grayscale(0) contrast(140%) hue-rotate(56deg) invert(16%) }

   Chapati, unleavened flatbread from the Indian subcontinent
 Flour tortilla, a thin unleavened flatbread from Mexico
 Focaccia, a flat oven-baked bread from Italy
 Injera, a sourdough-risen flatbread from East Africa
 Khachapuri, a breaded cheese dish from Georgia
 Khubz, a round bread from the Arabian Peninsula
 Matnakash, a leavened bread from Armenia (related to the Ramadan pita)
 Naan, a leavened, oven-baked flatbread from Central and South Asia
 Pită de Pecica, a round bread from Romania
 Rghaif, a pancake-like bread from Northwest Africa

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

Cela fonctionne dans le style de l’utilisateur, et il ne semble pas fonctionner dans les pages Web. Je n’ai pas trouvé la 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.