Style de barre de défilement CSS Cross browser

Question

Comment définir un navigateur croisé de style barre de défilement CSS? J'ai testé ce code, il ne fonctionne que dans IE et Opera, mais a échoué dans Chrome, Safari et Firefox.

 <style type="text/css">
<!--    
body{scrollbar-face-color: #000000;
scrollbar-shadow-color: #2D2C4D;
scrollbar-highlight-color:#7D7E94;
scrollbar-3dlight-color: #7D7E94;
scrollbar-darkshadow-color: #2D2C4D;
scrollbar-track-color: #7D7E94;
scrollbar-arrow-color: #C1C1D1;
}
 -->
</style>
 

Answer 1

La prise en charge des barres de défilement par Webkit est assez sophistiquée . Ce CSS donne une barre de défilement très minime, avec une piste gris clair et un pouce plus foncé:

 ::-webkit-scrollbar
{
  width: 12px;  /* for vertical scrollbars */
  height: 12px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track
{
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb
{
  background: rgba(0, 0, 0, 0.5);
}
 

Cette réponse est une source fantastique d'informations supplémentaires.

Answer 2

Les styles CSS à barre de défilement sont une curiosité inventée par les développeurs Microsoft. Ils ne font pas partie de la norme W3C pour CSS et, par conséquent, la plupart des navigateurs les ignorent.

Answer 3

jScrollPane est une bonne solution pour traverser le navigateur scrollbars et dégrade bien.

Answer 4

nanoScrollerJS est tout simplement à utiliser. J'ai toujours les utiliser...

Compatibilité avec les navigateurs:

• IE7+
• Firefox 3+
• Chrome
• Safari 4+
• Opera 11.60+

Les navigateurs mobiles de soutien:

• iOS 5+ (iPhone, iPad et iPod Touch)
• iOS 4 (avec un polyfill)
• Android Firefox
• Android 2.2/2.3 navigateur natif (avec un polyfill)
• Android Opéra de 11,6 (avec un polyfill)

Answer 5

Ce lien montre que vous avez à faire sur les navigateurs Webkit :

http://CSS-Tricks.com/Custom-ScrollBars-in-WebKit/