Cambiar el estilo de las barras de desplazamiento

Question

¿Es posible cambiar el estilo de las barras de desplazamiento para todos los navegadores? Si es así, ¿cómo?

Answer 1

Es posible en Internet Explorer usar una serie de propiedades de CSS scrollbar-* no estándar. Consulte this page para obtener una útil herramienta generadora.

Aparte de eso, solo es posible utilizar soluciones personalizadas de barra de desplazamiento accionada por JavaScript. El jScrollPane jQuery plugin se ve muy bonito y fácil de instalar. Here es una página de ejemplo.

Answer 2

No. IE le permite establecer colores para algunas partes constituyentes de la barra de desplazamiento. Opera permite algunos, pero no todos, esos estilos.

El estilo de color de la barra de desplazamiento es cada vez más irrelevante a medida que las IU avanzan hacia la creación de imágenes complejas basadas en barras de desplazamiento. En IE, la configuración de cualquiera de los colores revierte la representación a una barra de desplazamiento 3D simple estilo Windows 2000 en lugar de cualquier tema de usuario swishy. Los usuarios de Windows Vista/7 (Aero) probablemente no le agradecerán por eso.

Puede, por supuesto, hacer su propio ersatz-scrollbars fuera de <div> s y darles el estilo que desee. Pero el resultado casi siempre se comporta peor que las barras de desplazamiento reales, ya que está intentando replicar un elemento de IU complejo cuyo comportamiento esperado es diferente para cada sistema operativo. Puede pasar mucho tiempo reproduciendo el comportamiento de paginación, teclado arriba/abajo y la rueda del mouse, pero nunca bastante se siente como una barra de desplazamiento del SO real.

Answer 3

Puede personalizar las barras de desplazamiento para todos los navegadores con un poco de Javascript. Pero en este momento no hay forma de diseñarlos usando solo CSS solo como una solución entre navegadores.

This article will help if you decide to use Javascript.

Answer 4

Las barras de desplazamiento de diseño y programación no son tratadas por estándares en este momento, pero algunos proveedores tienen extensiones para abordar este problema en los navegadores web de escritorio. El plugin jQuery jScrollPane es una excelente opción si desea usar barras de desplazamiento personalizadas.

---

Vendor Extensions

Internet Explorer (comenzando con la versión 8) tiene extensiones a CSS y el DOM que le permite especificar color sólo de las diferentes partes de una barra de desplazamiento.

Un enlace actualizado a la documentación de Microsoft es este: http://msdn.microsoft.com/en-us/library/ff974092(v=VS.85).aspx. Querrá simplemente observar todas las propiedades que comienzan con "-ms-scrollbar".

WebKit (por ejemplo, Safari y Chrome) tiene un pseudo-elemento CSS para diseñar barras de desplazamiento que le permite aplicarle cualquier propiedad de CSS. Para obtener más información ver esto Surfin' Safari entrada de blog: http://webkit.org/blog/363/styling-scrollbars/

Ejemplo:

::-webkit-scrollbar 
{ 
    width: 13px; 
    height: 13px; 
} 

Mozilla (por ejemplo Firefox) y Opera no parecen tener ningún soporte para barras de desplazamiento de estilo.

---

barras de desplazamiento personalizadas

En cuanto a la JScrollPane jQuery Plugin es una excelente opción, si desea que las barras de desplazamiento personalizadas. Es bastante completo para abordar la funcionalidad esperada de las barras de desplazamiento y evita que generes la tuya.

Es importante darse cuenta de que jScrollPane reemplaza las barras de desplazamiento nativas del navegador, y es posible que el "toque y capacidad de respuesta" de esas barras de desplazamiento personalizadas no sea tan bueno como "lo real". Pero, de nuevo, podría ser lo suficientemente bueno si valoras la forma sobre la función.

Este es un enlace más reciente de la documentación JScrollPane: http://jscrollpane.kelvinluck.com/