Navegador de estilo de barra CSS cruzado

Question

¿Cómo puedo definir un navegador cruzado de estilo de barra de desplazamiento CSS? Probé este código, solo funciona en IE y Opera, pero falló en Chrome, Safari y 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

Los estilos CSS Scrollbar son una rareza inventada por los desarrolladores de Microsoft. No son parte del estándar W3C para CSS y, por lo tanto, la mayoría de los navegadores simplemente los ignoran.

Answer 2

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

Answer 3

A partir de IE6, creo que no se puede personalizar la barra de desplazamiento con esas propiedades. El artículo de Chris Coyier vinculado a arriba entra en detalles agradables sobre las opciones de css propietario de webkit para personalizar la barra de desplazamiento.

Si realmente desea una solución de navegador cruzado que pueda personalizar completamente, tendrá que usar algunos JS. Aquí hay un enlace a un buen complemento llamado FaceScroll: http://www.dynamicdrive.com/dynamicindex11/facescroll/index.htm

Answer 4

El soporte de Webkit para barras de desplazamiento es quite sophisticated. Este CSS da una barra de desplazamiento muy mínimo, con una pista de color 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); 
} 

This answer es una fantástica fuente de información adicional.

Answer 5

prueba esto es muy fácil de usar y probar en IE y Safari y FF y funcionó bien y sin necesidad de muchos div solo agrega id y funcionará bien, después de vincular los archivos Js y Css. FaceScroll Custom scrollbar

espero que sea de ayuda

Editar Paso 1: Añadir el guión a continuación 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: A continuación, en el cuerpo de la página, añadir el debajo del bloque HTML de muestra 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> 

Answer 6

nanoScrollerJS es simplemente de usar. Siempre uso de ellos ...

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 una polyfill)
• Android Opera 11.6 (con un polyfill)