sostenido soporte sitio pantalla navegacion herramientas extendido contacto completa como barra asistencia activar css firefox scroll scrollbar

css - soporte - Cambio de color de la barra de desplazamiento en Firefox



sitio web de asistencia de firefox (6)

Cambiar el color de la barra de desplazamiento en Firefox no es tan trivial como lo es en Internet Explorer y Opera. Firefox solo permite que el estilo de la barra de desplazamiento sea configurado por el tema. Ésto es una cosa buena. A muchos usuarios no les gusta cambiar de forma aleatoria la apariencia de los widgets de la interfaz según el gusto de un diseñador. Cambiar el aspecto de las piezas de la interfaz puede ser aún más problemático para los visitantes con discapacidad visual que pueden estar usando un tema de alto contraste.

Dicho esto, si la barra de desplazamiento está contenida dentro de un <div> en su página, puede crear una barra de desplazamiento personalizada y hacerlo funcional usando JavaScript. Este plugin de jQuery parece que haría el truco muy bien: http://jscrollpane.kelvinluck.com/

Creo que esto es más o menos lo que quieres hacer: martinsmucker.com/demo/scroller.html

Así es como funciona:

Dentro del <head> del documento, tenemos que hacer referencia a varias hojas de estilo y scripts (que probablemente ya haya descargado de http://jscrollpane.kelvinluck.com/ .

Aquí es donde sucede la gran mayoría de la magia:

<!-- Styles --> <link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" /> <style type="text/css"> html, body { height: 100%; margin: 0; padding:0; } #container { height:100%; width:100%; margin: 0; padding:0; overflow: auto; } </style> <!-- Scripts --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.mousewheel.js"></script> <script type="text/javascript" src="jquery.jscrollpane.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(''.scroll-pane'').jScrollPane(); }); </script>

Esto supone que los archivos css y js están ubicados en el mismo directorio que su archivo html. Comenzamos enlazando con la hoja de estilo proporcionada.

Luego, agregue un poco de CSS para evitar que se muestren las barras de desplazamiento normales. Establezca el margin y el padding de html y body en 0, y configure la height en 100%. Todo nuestro contenido estará envuelto en un div con una identificación de "contenedor". Este contenedor llena la página exactamente (alto: 100%; ancho: 100%;) y roba el desplazamiento para que podamos personalizar la barra de desplazamiento ( overflow: auto; ).

Luego hacemos referencia a todos los scripts apropiados. Aquí estoy usando la copia de jQuery alojada por Google, y de nuevo estoy asumiendo que todos los scripts locales están en el mismo directorio que el archivo html. El último poco de jquery encuentra todos los divs con la clase "panel de desplazamiento" y agrega los elementos apropiados y la funcionalidad de desplazamiento hacia ellos.

El html es entonces muy simple.

<body> <div class="scroll-pane" id="container"> All of your content for the page goes here. </div> </body>

Si has hecho todo bien, tu página debería verse como mi ejemplo.

Quiero cambiar el color de la barra de desplazamiento en Firefox. ¿Cómo puedo hacer eso?

Chrome y Safari son compatibles con el color de las barras de desplazamiento. Coloque el siguiente código en su CSS y vea cómo sucede la magia:

::-webkit-scrollbar { height: 12px; width: 12px; background: #969696; -webkit-border-radius: 1ex; } ::-webkit-scrollbar-thumb { background: #2B2B2B; -webkit-border-radius: 1ex; -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75); } ::-webkit-scrollbar-corner { background: #1A1A1A; }

Lo único que falta es que Firefox admita esta función.

Esto no es realmente útil por lo que sé, pero vale la pena señalar que el atributo que controla si las barras de desplazamiento se muestran o no en Firefox es: ( enlace de referencia )

Attribute....scrollbars Type.........nsIDOMBarProp Description..The object that controls whether or not scrollbars are shown in the window. This attribute is "replaceable" in JavaScript. Read only

Firefox también tiene las siguientes propiedades específicas del proveedor:

desbordamiento: -moz-scrollbars-none

otros valores válidos son -moz-scrollbars-horizontal y -moz-scrollbars-vertical.

no puedes como puede ver here , esto solo es posible para IE5 + y Opera7.2 +.

EDITAR: con un poco de javascript podría ser posible construir sus propias "barras de desplazamiento html" que podrían ser diseñadas como las quiere, pero no creo que deba hacerlo, escribiendo esto solo para ser detallado.