horizontal - mostrar barra de desplazamiento css

Navegador cruzado del estilo de la barra deslizadora CSS

Question

Esta pregunta ya tiene una respuesta aquí:

• Barra de desplazamiento personalizada CSS en div 13 respuestas

¿Cómo puedo definir un cross browser del estilo CSS de la barra de desplazamiento? 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

A partir de IE6, creo que no se puede personalizar la barra de desplazamiento usando 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 quieres una solución de navegador cruzado que puedas personalizar por completo, tendrás que usar algunos JS. Aquí hay un enlace a un buen complemento llamado FaceScroll: http://www.dynamicdrive.com/dynamicindex11/facescroll/index.htm

Answer 2

El soporte de Webkit para barras de desplazamiento es bastante sofisticado . Este CSS ofrece una barra de desplazamiento muy mínima, con una pista gris clara 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.

Answer 3

Los estilos CSS de 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 4

prueba esto, es muy fácil de usar y probar en IE y Safari y FF y funcionó bien y además de no necesitar muchos div , solo agrega id y funcionará bien, después de vincular tus archivos JS y Css. http://www.dynamicdrive.com/dynamicindex11/facescroll/index.htm

Espero eso ayude

Editar Paso 1: agrega la secuencia de comandos a continuación a la sección de tu 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 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 5

nanoScrollerJS es simplemente para usar. Yo siempre los uso ...

Browser compatibility:

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

Mobile browsers support:

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

Answer 6

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