web-dev-qa-db-fra.com

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 avec 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!

cssfirefoxwebkitscrollbar
277
Dimitri Vorontzov

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

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 pour ::-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=7779

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

215
thirtydot

Puis-je proposer une alternative?

Pas de script que ce soit, seulement des styles CSS normalisés et un peu de créativité. Réponse courte - masque certaines 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 en profondeur, vérifiez ici ...

jsfiddle.net/aj7bxtjz/1/

41
Tomaz

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

J'ai donné barre de défilement personnalisée JQuery un essai. Il est assez sophistiqué et fait du défilement régulier (avec une inertie du défilement) et comporte une multitude de paramètres que vous pouvez modifier, mais cela a fini par être un peu trop gourmand en temps processeur (et cela ajoute une quantité considérable au DOM).

Maintenant, je donne barre de défilement parfaite un essai. C'est simple et léger (6Ko) et ça fait un travail décent jusqu'à présent. Cela ne nécessite pas beaucoup de ressources en temps processeur (à ma connaissance) et ajoute très peu à votre DOM. Tweak ne dispose que de quelques paramètres (wheelSpeed ​​et wheelPropagation), mais c'est tout ce dont j'ai besoin et il gère parfaitement les mises à jour du contenu défilant (comme le chargement d'images).

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

36
Markus Coetzee

Firefox 64 ajoute le support pour le brouillon de spécifications CSS Scrollbars Module Level 1 , ce qui ajoute deux nouvelles propriétés sur scrollbar-width et scrollbar-color qui permet de contrôler l’affichage des barres de défilement.

Vous pouvez définir scrollbar-color sur l'une des valeurs suivantes (descriptions à partir 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 correspondante.
  • dark Affiche une barre de défilement sombre, qui peut être une variante sombre de la barre de défilement fournie par la plate-forme, ou une barre de défilement personnalisée avec des couleurs sombres.
  • light Affiche une barre de défilement légère, qui peut être une variante légère de la barre de défilement fournie par la plate-forme, ou une barre de défilement personnalisée de couleurs claires.
  • _<color>_ _<color>_ Applique la première couleur à la barre de défilement, la seconde à la piste de la barre de défilement.

Notez que dark et light valeurs ne sont 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 scrollbar-width sur l'une des valeurs suivantes (descriptions à partir de MDN):

  • auto La largeur de la 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 offrant cette option, ou une barre de défilement plus fine que la largeur de la barre de défilement par défaut de la plate-forme.
  • none Aucune barre de défilement affichée, mais l'élément continuera à défiler.

Vous pouvez également définir une valeur de longueur spécifique, en fonction de la spécification. thin et une longueur spécifique peuvent ne rien faire sur toutes les plates-formes, et ce qu'elles font exactement est spécifique à la plate-forme. En particulier, Firefox ne semble pas supporter actuellement une valeur de longueur spécifique ( ce commentaire sur leur traqueur de bogues semble le confirmer ). Le travail de clé thin semble bien pris en charge, avec au moins la prise en charge de macOS et de Windows.

Il est probablement intéressant de noter que l'option de valeur de longueur et la propriété entière _scrollbar-width_ doivent être supprimées dans un prochain brouillon. Si cela se produit, cette propriété particulière peut être supprimée de Firefox dans une version ultérieure.

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>_
29
Alexander O'Mara

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

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

Les règles clés sont:

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 que, dans le respect de votre solution, il est possible d'utiliser également des règles plus simples Chrome comme suit:

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

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

Enfin, pour masquer les flèches dans les barres de défilement également dans Firefox, il est actuellement nécessaire de le définir comme " thin " avec la règle suivante scrollbar-width: thin;

17
Luca Detomi

Cela fonctionne dans le style utilisateur, et cela 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=7779

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érifiez http://codemug.com/html/custom-scrollbars-using-css/ pour plus de détails.

0
ipirlo
@-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;
    }
}
0
ramme