CSS scrollbar style cross browser [dupliquer]

pour scrollbars est très sophistiqué . Ce CSS donne un scrollbar très minime, avec une piste gris clair et un pouce plus sombre:

::-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 fantastique source d'informations supplémentaires.

jScrollPane est une bonne solution pour traverser les barres de défilement de navigateur et se dégrade bien.

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

Browser compatibility:

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

Mobile browsers support:

• 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 Opera 11.6 (avec un polyfill)

exemple de Code dans la Documentation,

1. Balisage - Le type de structure de majoration est nécessaire pour que le plugin fonctionne.

   ... contenu ici ...

à partir de IE6 je crois que vous ne pouvez pas personnaliser la barre de défilement en utilisant ces propriétés. L'article de Chris Coyier lié à ci-dessus va dans le détail sur les options pour webkit propriétaire css pour personnaliser la barre de défilement.

si vous voulez vraiment une solution de navigateur croisé que vous pouvez entièrement personnaliser, vous allez devoir utiliser quelques JS. Voici un lien vers un beau plugin pour lui appelé FaceScroll: http://www.dynamicdrive.com/dynamicindex11/facescroll/index.htm

essayez ceci, il est très facile à utiliser et testé sur IE et Safari et FF et a fonctionné très bien et à côté de pas besoin pour beaucoup div autour de lui juste ajouter id et il fonctionnera très bien, après que vous liez les fichiers Js et Css. FaceScroll Personnalisé de barre de défilement

espoir aide de la

Modifier Étape 1: Ajoutez le script ci-dessous à la section de votre page:

<link href="general.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="facescroll.js"></script>
<script type="text/javascript">
    jQuery(function(){ // on page DOM load
        $('#demo1').alternateScroll();
        $('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });  
    })
</script>

Étape 2: Ensuite, dans le corps de votre page, ajoutez le bloc HTML ci-dessous à votre page.

<p><b>Scrollbar (default style) shows onMouseover</b></p>

<div id="demo1" style="width:300px; height:250px; padding:8px; background:lightyellow; border:1px solid gray; resize:both; overflow:scroll">

From Wikipedia- Gunpowder, also known since in the late 19th century as black powder, was the first chemical explosive and the only one known until the mid 1800s.[2] It is a mixture of sulfur, charcoal, and potassium nitrate (saltpeter) - with the sulfur and charcoal acting as fuels, while the saltpeter works as an oxidizer.[3] Because of its 
</div>

<br />

<p><b>Scrollbar (alternate style), always shown</b></p>

<div id="demo2" style="width:400px; height:130px; padding:10px; padding-right:8px; background:lightyellow; border:1px solid gray; overflow:scroll; resize:both;">

From Wikipedia- Gunpowder, also known since in the late 19th century as black powder, was the first chemical explosive and the only one known until the mid 1800s.[2] It is a mixture of sulfur, charcoal, and potassium nitrate (saltpeter) - with the sulfur and charcoal acting as fuels, while the saltpeter works as an oxidizer.[3] Because of its 
</div>