Internet Explorer presentó valores de color CSS para barras de desplazamiento en IE versión 5.5, pero los estilos de barras de desplazamiento nunca se convirtió en una parte oficial de cualquier especificación CSS. Navegadores Sin embargo, basado en WebKit, como Safari y Chrome soporte CSS en las barras de desplazamiento y permiten cambiar el ancho de la barra de desplazamiento. Estos navegadores utilizan pseudo-elementos y el prefijo "-webkit" para permitir que usted cambie los estilos en una variedad de piezas de barra de desplazamiento, incluyendo los botones de flecha y pista.
Abra el archivo de hoja de estilo en el Bloc de notas o un editor de código. Busque el archivo CSS siguiente enlazado en la cabecera de HTML de su sitio web:
link rel = "stylesheet" href type = "ruta / al / style.css" = "text / css" /
Escribe el código CSS en la parte inferior de la hoja de estilo. Si su página web no utiliza hojas de estilo externas, agregue la CSS entre las etiquetas "estilo" en la cabecera de HTML.
Añadir estas tres reglas de estilo:
::-Webkit-barra de desplazamiento {
}
::-Webkit-scrollbar-track {
}
::-Webkit-scrollbar-thumb {
}
Los dobles signos de dos puntos indican pseudo-elementos de CSS. Estos son elementos que no cree en el código HTML, barras de desplazamiento del navegador entran en esta categoría.
Ajuste la anchura interior "::-webkit-barra de desplazamiento {}":
::-Webkit-barra de desplazamiento {
Ancho: 20px;
}
Al establecer esta propiedad por sí sola no crea una barra de desplazamiento que trabaja en Safari o Chrome, porque ambos navegadores desactivar todos los estilos de la barra de desplazamiento cuando se establece cualquier establecimiento en el pseudo-elementos barra de desplazamiento, por lo que terminan con un espacio en blanco, invisible barra de desplazamiento.
Dale la pista desplazamiento un color de fondo:
::-Webkit-scrollbar-track {
background: # eee;
}
Agregar un color de fondo a la pieza "pulgar" de la barra de desplazamiento:
::-Webkit-scrollbar-thumb {
background: # 000;
}
La pieza de oro es la parte de la barra de desplazamiento que el usuario puede hacer clic y arrastrar para desplazarse hacia arriba o hacia abajo.
Consejos y advertencias
Añadir "border-radius" en pedazos barra de desplazamiento para crear esquinas redondeadas, y añade "box-shadow" con el valor del recuadro para añadir profundidad a la barra de desplazamiento.
Duplicar el CSS barra de desplazamiento y retire el "-webkit-" texto de cada regla. Si CSS para las barras de desplazamiento se convierte en una parte oficial de la especificación CSS establecido por el World Wide Web Consortium, o W3C, el código estará listo para su uso por otros navegadores.
A partir del momento de la publicación, los navegadores no Webkit como IE, Firefox y Opera no soportan CSS en las barras de desplazamiento.
Bueno!
ResponderEliminar