Comment modifier la couleur de la barre de défilement à l'aide de css ?

Question

Mon jsfiddle est ici
J'ai essayé de changer la couleur de la barre de défilement mais ici cela ne fonctionne pas.

Css :

.flexcroll {     
    scrollbar-face-color: #367CD2;
    scrollbar-shadow-color: #FFFFFF;
    scrollbar-highlight-color: #FFFFFF;
    scrollbar-3dlight-color: #FFFFFF;
    scrollbar-darkshadow-color: #FFFFFF;
    scrollbar-track-color: #FFFFFF;
    scrollbar-arrow-color: #FFFFFF;
}

Answer 1

Vous pouvez utiliser les attributs suivants pour webkit, qui s'inscrivent dans le cadre de l'option shadow DOM :

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

Voici un bidouillage fonctionnel avec une barre de défilement rouge, basé sur le code provenant de cette page en expliquant les enjeux.

http://jsfiddle.net/hmartiro/Xck2A/1/

En utilisant cette solution et la vôtre, vous pouvez gérer tous les navigateurs à l'exception de Firefox, qui, à ce stade, je pense, nécessite toujours une solution javascript.

Answer 2

Votre css ne fonctionnera que dans le navigateur IE. Et le css suggéré par hayk.mart ne fonctionnera pas dans les navigateurs webkit. Et en utilisant différents hacks css, vous ne pouvez pas styliser les barres de défilement de votre navigateur avec le même résultat.

Il est donc préférable d'utiliser un jQuery/Javascript pour obtenir une solution multi-navigateurs avec le même résultat.

Solution :

En utilisant jScrollPane un plugin jQuery, vous pouvez obtenir une solution multi-navigateur

Voir cette démo