Une mise à jour récente du navigateur Google Chrome a modifié la barre de défilement horizontal qui est maintenant plus discrète, trop peut-être avec une largeur légèrement réduite.

chrome défilementchrome défilement
Avant / Après

Peut-on modifier le style de la barre sur son blog ? Normalement le style du site ne doit pas théoriquement affecter le style du navigateur. Avec Mozilla Firefox, il faut d'ailleurs recourir à des méthodes complexes à base de javascript. Pour Chrome et Safari, des codes CSS existent pour modifier la barre de défilement... Et s'ils existent, pourquoi ne pas les utiliser ?

Le style de la barre de défilement fonctionne avec des pseudo-class (donc deux points avant). Voici les principales :

  • ::-webkit-scrollbar /*la barre en entier (horizontale ou verticale)*/
  • ::-webkit-scrollbar-thumb /*l'ascenseur*/
  • ::-webkit-scrollbar-button /*les boutons haut et bas*/

Avec ça, on peut personnaliser la barre de très nombreuses façons. Pour ma part, je modifie la largeur et le fond. Pour ce blog, ça donne ça :

::-webkit-scrollbar {height:1em;width:1.2em;background:GhostWhite;} /**/
::-webkit-scrollbar-thumb {background:#0B614B;-webkit-box-shadow: 0 0 5px #888; } /*ascenseur*/
::-webkit-scrollbar-thumb:hover {background:purple;}
::-webkit-scrollbar-button {background:#0B6121;-webkit-box-shadow: inset 0 0 0 .0625em rgb(79,79,79), inset 0 0 0 .375em rgb(102,102,102);} /*bouton bas et haut*/

L'ascenseur au survol (::-webkit-scrollbar-thumb:hover) devient violet (purple)

scrollbar
Barre en vert

Exemple plus complet ici

Pour Internet Explorer