CSS scrollbar estilo cross browser [duplicar]

El soporte de Webkit para las barras de desplazamiento es bastante sofisticado. Este CSS da una barra de desplazamiento muy mínima, con una pista gris claro y un pulgar más oscuro:

::-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);
}

Esta respuesta es una fantástica fuente de información adicional.

JScrollPane es una buena solución para cruzar las barras de desplazamiento del navegador y se degrada muy bien.

NanoScrollerJS es simplemente para usar. Siempre los uso...

Browser compatibility:

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

Mobile browsers support:

• iOS 5 +(iPhone, iPad y iPod Touch)
• iOS 4 (con un polyfill)
• Android Firefox
• Android 2.2 / 2.3 navegador nativo (con un polyfill)
• Android Opera 11.6 (con un polyfill)

Ejemplo de código de la Documentación,

1. Marcado - El siguiente tipo de estructura de marcado es necesario para que el plugin funcione.

   ... contenido aquí ...

A partir de IE6 creo que no se puede personalizar la barra de desplazamiento usando esas propiedades. El artículo de Chris Coyier enlazado arriba entra en detalle sobre las opciones para css propietario de webkit para personalizar la barra de desplazamiento.

Si realmente quieres una solución de navegador cruzado que puedas personalizar completamente, vas a tener que usar algunos JS. Aquí hay un enlace a un buen plugin para él llamado FaceScroll: http://www.dynamicdrive.com/dynamicindex11/facescroll/index.htm

Prueba esto es muy fácil de usar y probado en IE y Safari y FF y funcionó bien y además no hay necesidad de muchos div alrededor de él solo agregue id y funcionará bien, después de vincular los archivos Js y Css. FaceScroll Barra de desplazamiento personalizada

Espero que ayude

Editar Paso 1: Agregue el siguiente script a la sección de su página:

<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>

Paso 2: Luego, en el CUERPO de su página, agregue el siguiente bloque HTML de ejemplo a su página.

<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>