Barre de défilement CSS personnalisée pour Firefox

313

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!

Dimitri Vorontzov
la source
1
Veuillez partager comment vous pouvez le faire en utilisant jQuery. Je suis confronté au même problème mais j'ai utilisé CSS pour le corriger pour Webkit. Cependant, Firefox pose un problème avec lequel votre solution jQuery peut vous aider.
iGbanam
1
Je recommande d'utiliser le plugin jscrollpane jQuery.
Dimitri Vorontzov
Il y a un problème avec jScrollPane dans Firefox. jScrollPane fonctionne parfaitement dans Chrome, mais dans Firefox, vous avez une barre de défilement système vide à droite de la barre de défilement jScrollPane. Il ne devrait y avoir qu'une seule barre de défilement
iGbanam
1
Pas vrai. Si vous avez cela, vous avez fait quelque chose de mal quelque part.
Dimitri Vorontzov

Réponses:

239

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

Voir ces réponses:

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:

thirtydot
la source
2
Merci, ThirtyDot. Une question cependant: qu'en est--moz-apparence: scrollbartrack-vertical - et d'autres extensions CSS connexes? Peut-être peuvent-ils être utilisés d'une manière ou d'une autre?
Dimitri Vorontzov
2
Non. Malheureusement, aucune des valeurs possibles pour -moz-appearancene peut aider. "The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system's theme."- vous obtiendrez juste une barre de défilement native.
thirtydot
15
Juste au cas où quelqu'un lisant ceci aurait besoin d'une solution pratique, j'ai fini par utiliser le plugin jscrollpane jQuery.
Dimitri Vorontzov
1
@JacquesMathieu, je vois ce que tu veux dire. Bien que ce ne soit pas la faute de Baron, si je télécharge la page et empêche Baron de s'initialiser, le bogue se produit toujours. Il semble donc que Chrome soit en faute ici.
thephpdev
3
drafts.csswg.org/css-scrollbars-1 est le début de l'étape 1 de la spécification, mais il est activé dans Firefox Nightly maintenant hors de la boîte par défaut.
wegry
53

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:

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:

Alexander O'Mara
la source
Merci pour cette réponse. J'ai mis à jour ma réponse acceptée pour la promouvoir (et l'autre réponse pertinente) afin que les gens soient plus susceptibles de la voir.
thirtydot
1
Cela reproduit essentiellement la réponse de Luca de trois semaines auparavant.
Josh Habdas
@JoshHabdas Cette réponse ne contient pas autant d'informations de compatibilité ou d'utilisation. J'ai créé cette réponse parce que l'autre réponse ne contenait pas les informations importantes que je cherchais.
Alexander O'Mara
1
Vous pouvez leur donner du crédit, suggérer des commentaires ou envisager de modifier leur réponse.
Josh Habdas
2
@JoshHabdas Eh bien, 5 personnes l'ont déjà trouvé utile, et il contient des informations introuvables ailleurs sur le Web, donc je ne suis pas d'accord.
Alexander O'Mara
43

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/

Tomaz
la source
7
Cela ne répond malheureusement pas à la question. Dimitri essaie de styliser la barre de défilement, pas de la cacher.
stvnrynlds
14
C'était il y a 4 ans (je le sais), donc je suis sûr qu'il a déjà fait quelque chose maintenant. Mais le sujet est toujours d'actualité - alors que d'autres navigateurs autorisent un certain type de modification "illégale" des barres de défilement, FF ne le permet pas. C'est pourquoi j'ai décidé de la publier, et le résultat final est une barre de défilement de style visuel, indépendamment du fait que la façon de le faire en cache une partie.
Tomaz
j'adore cette solution, sauf pour tout le balisage supplémentaire avec positionnement absolu (fait des choses de taille variable un cauchemar) et vous ne pouvez pas réellement changer le style, vous masquez / cachez simplement les éléments de la roulette existante - dommage si je veux une barre verte!
RozzA
3
oui, après quatre ans, il ne s'agit pas de répondre à la question du PO autant que de contribuer à la communauté.
tmthyjames
3
L'essence du problème est que les solutions fournies par certains moteurs de rendu ne sont pas standard. C'est la question qui répond le mieux à mes préoccupations et c'est la réponse que je recherchais.
Filip Dupanović
36

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.

Markus Coetzee
la source
3
Il y a aussi un émulateur de défilement trackpad - c'est ce que twitch.tv utilise.
forivall
1
Perfect Scrollbar est vraiment très bon. Après avoir épuisé de nombreuses autres options, j'ai trouvé que c'était la meilleure solution. Merci de l'avoir suggéré.
Leonard Teo
nanoScroller est également très bon et relativement maigre. jamesflorentino.github.io/nanoScrollerJS Opposé aux lourds plugins JS, celui-ci cache simplement le scroller natif et montre un scroller alternatif utilisant l'événement 'scroll' natif
Danny R
1
j'ai évité toutes les solutions jquery, car elles traînent toutes sur des machines plus lentes ou sous stress, mais PS ressemble à un gagnant
RozzA
31

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;

Luca Detomi
la source
1
On dirait qu'IE 5.5 a peut-être réussi quelque chose après tout. :)
Josh Habdas
5

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

Humain
la source
Bonne nouvelle, mais comment changer le contour?
AbeIsWatching
0

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.

ipirlo
la source
2
j'ai essayé la même chose que vous avez écrit, mais ça ne fonctionne pas pour moi dans FF, vérifiez le jsfiddle.net/gGbkY/1 suis-je en manque quelque chose?
Satinder singh
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.
ipirlo
1
veuillez consulter le même lien: cela ne fonctionne plus
Krunal Shah
3
Quel est le style utilisateur?
Marecky
Le bogue que vous avez lié a été signalé il y a 17 ans et n'a toujours pas été attribué. Je pense qu'il est prudent de dire que FF ne prendra jamais en charge le masquage des barres de défilement natives.
Sterling Bourne
-2
@-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;
    }
}
ramme
la source
5
Vous avez fourni un blob de code avec peu ou pas d'informations décrivant ce qu'il fait ou comment il le fait.
Josh Habdas