Barra de desplazamiento - Trucos CSS

Una breve historia del estilo de las barras de desplazamiento:

Solía ser algo que solo Internet Explorer podía hacer (versiones antiguas) con cosas como -ms-scrollbar-base-color. Estos ya no existen.
Luego, los motores de navegador basados en WebKit se incorporaron con cosas como ::-webkit-scrollbar. Eso es lo que cubre principalmente esta entrada de Alamanac, ya que funciona en el panorama de Safari / Chrome en la actualidad.
Los estándares finalmente se han involucrado, y esas opciones de estilo están cubiertas por propiedades sin prefijo como scrollbar-color y scrollbar-width.

Las barras de desplazamiento de estilo para el mundo de Safari / Chrome se exponen detrás del -webkitprefijo del proveedor.

Esta entrada del almanaque es una descripción general, para un desglose más completo del trabajo con barras de desplazamiento personalizadas, lea este artículo de Trucos CSS.

body::-webkit-scrollbar ( width: 1em; ) body::-webkit-scrollbar-track ( box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); ) body::-webkit-scrollbar-thumb ( background-color: darkgrey; outline: 1px solid slategrey; )

La -webkit-scrollbarfamilia de propiedades consta de siete pseudoelementos diferentes que, juntos, componen un elemento de interfaz de usuario de barra de desplazamiento completo:

::-webkit-scrollbaraborda el fondo de la barra en sí. Suele estar cubierto por los otros elementos.
::-webkit-scrollbar-button aborda los botones de dirección en la barra de desplazamiento
::-webkit-scrollbar-track aborda el espacio vacío "debajo" de la barra de progreso
::-webkit-scrollbar-track-piece es la capa superior de la barra de progreso que no está cubierta por el elemento de desplazamiento arrastrable (pulgar)
::-webkit-scrollbar-thumb aborda el elemento de desplazamiento arrastrable que cambia de tamaño según el tamaño del elemento desplazable
::-webkit-scrollbar-corner aborda la esquina (generalmente) inferior del elemento desplazable, donde dos barras de desplazamiento pueden encontrarse
::-webkit-resizeraborda el controlador de cambio de tamaño que se puede arrastrar y que aparece scrollbar-corneren la esquina inferior de algunos elementos

Además de estos pseudo-elementos, también hay once clases de pseudo-selectores que no son necesarios pero que brindan a los diseñadores el poder de diseñar varios estados e interacciones de la interfaz de usuario de la barra de desplazamiento. Se puede encontrar un desglose completo de esos pseudo-selectores y un ejemplo detallado en este artículo de Trucos CSS.

¡Mira este bolígrafo!

Puntos de interés

Si no hay un selector calificado que preceda a los diversos pseudoelementos, los estilos se aplicarán a cualquier barra de desplazamiento que pueda aparecer en la página.
La configuración de -webkit-scrollbarestilos es una buena forma de obligar a su página web a mostrar barras de desplazamiento horizontales o verticales en versiones de Mac OS más nuevas que Lion, en las que las barras de desplazamiento suelen estar ocultas de forma predeterminada.
Dado que esta propiedad está detrás de un -webkitprefijo de proveedor, se han escrito varios complementos de jQuery en “polyfill” o extienden esta funcionalidad a otros navegadores. Uno de esos complementos es jScrollPane.

Soporte del navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.