Cómo diseñar barras de desplazamiento con CSS

Introducción

En septiembre de 2018, W3C CSS Scrollbars definió especificaciones para personalizar la apariencia de las barras de desplazamiento con CSS.

A partir de 2020, el 96 % de los usuarios de Internet utilizan navegadores que admiten estilos de barra de desplazamiento CSS. Sin embargo, deberá escribir dos conjuntos de reglas CSS para cubrir los navegadores Blink y WebKit y también Firefox.

En este tutorial, aprenderá a usar CSS para personalizar las barras de desplazamiento para que sean compatibles con los navegadores modernos.

Prerrequisitos

Para seguir este artículo necesitarás:

• Familiaridad con los conceptos de prefijos de proveedores , pseudoelementos y degradación elegante .

Cómo diseñar barras de desplazamiento en Chrome, Edge y Safari

Actualmente, el estilo de las barras de desplazamiento para Chrome, Edge y Safari está disponible con el prefijo de proveedor pseudo-elemento -webkit-scrollbar.

A continuación se muestra un ejemplo que utiliza los pseudoelementos ::-webkit-scrollbar, ::-webkit-scrollbar-tracky :::webkit-scrollbar-thumb

body::-webkit-scrollbar {  width: 12px;               /* width of the entire scrollbar */}body::-webkit-scrollbar-track {  background: orange;        /* color of the tracking area */}body::-webkit-scrollbar-thumb {  background-color: blue;    /* color of the scroll thumb */  border-radius: 20px;       /* roundness of the scroll thumb */  border: 3px solid orange;  /* creates padding around scroll thumb */}

Aquí hay una captura de pantalla de la barra de desplazamiento que se produce con estas reglas CSS:

Este código funciona en las últimas versiones de Chrome, Edge y Safari.

Lamentablemente, esta especificación ha sido abandonada formalmente por W3C y probablemente quedará obsoleta con el tiempo.

Dar estilo a las barras de desplazamiento en Firefox

Actualmente, el estilo de las barras de desplazamiento para Firefox está disponible con el nuevo CSS Scrollbars .

A continuación se muestra un ejemplo que utiliza scrollbar-widthpropiedades scrollbar-color:

body {  scrollbar-width: thin;          /* "auto" or "thin" */  scrollbar-color: blue orange;   /* scroll thumb and track */ }

Aquí hay una captura de pantalla de la barra de desplazamiento que se produce con estas reglas CSS:

Esta especificación comparte algunas características con la -webkit-scrollbarespecificación para controlar el color de la barra de desplazamiento. Sin embargo, actualmente no hay soporte para modificar el relleno y la redondez del “seguimiento del cursor”.

Cómo crear estilos de barra de desplazamiento a prueba de futuro

Puede escribir su CSS de manera que admita ambas -webkit-scrollbarespecificaciones CSS Scrollbars.

A continuación se muestra un ejemplo que utiliza scrollbar-width, scrollbar-color, ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::webkit-scrollbar-thumb:

/* Works on Firefox */* {  scrollbar-width: thin;  scrollbar-color: blue orange;}/* Works on Chrome, Edge, and Safari */*::-webkit-scrollbar {  width: 12px;}*::-webkit-scrollbar-track {  background: orange;}*::-webkit-scrollbar-thumb {  background-color: blue;  border-radius: 20px;  border: 3px solid orange;}

Los navegadores Blink y WebKit ignorarán las reglas que no reconozcan y aplicarán -webkit-scrollbarreglas. Los navegadores Firefox ignorarán las reglas que no reconozcan y aplicarán CSS Scrollbarsreglas. Una vez que los navegadores Blink y WebKit desistan por completo de la -webkit-scrollbarespecificación, volverán a la nueva CSS Scrollbarsespecificación sin problemas.

Conclusión

En este artículo, aprendió a usar CSS para diseñar barras de desplazamiento y cómo garantizar que estos estilos se reconozcan en la mayoría de los navegadores modernos.

También es posible simular una barra de desplazamiento ocultando la barra de desplazamiento predeterminada y utilizando JavaScript para detectar la altura y la posición de desplazamiento. Sin embargo, estos enfoques presentan limitaciones a la hora de reproducir experiencias como el desplazamiento por inercia (por ejemplo, el movimiento decreciente al desplazarse mediante paneles táctiles).

Si desea obtener más información sobre CSS, consulte nuestra página de temas de CSS para obtener ejercicios y proyectos de programación.