web-dev-qa-db-fra.com

Style de la barre de défilement avec css dans Google Chrome (-webkit)

Quelqu'un peut-il m'aider? Je veux faire un style simple pour la barre de défilement. J'ai trouvé des informations sur Internet et l'ai essayé, mais il semble que cela ne fonctionne pas vraiment pour certaines raisons. La barre de défilement a l'air bien lors de l'actualisation de la page, mais dès que vous touchez la barre de défilement, elle devient folle. Il se remplit de beaucoup de couleurs et vous ne pouvez pas comprendre qu'il s'agit d'une barre de défilement.

Voici à quoi il ressemble avant de le toucher - http://i40.tinypic.com/a2evro.png

Voici à quoi il ressemble après l'avoir touché - http://i44.tinypic.com/qzkirn.png

Voici le code que j'ai mis en CSS:

::-webkit-scrollbar {
width: 16px;
height: 16px; }

::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07); }

Merci à tous. À votre santé. Alex

cssgoogle-chromewebkitscrollbar
27
Alexandru Vlas

Voici un exemple qui fonctionne :

::-webkit-scrollbar {
    height: 12px;
    width: 12px;
    background: #000;
}

::-webkit-scrollbar-thumb {
    background: #393812;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
    background: #000;
}

Ou vous pouvez utiliser jScrollPane .

50
orel