La scrollbar-colorpropiedad controla los dos colores de una barra de desplazamiento: el color del pulgar y el color de la pista . scrollbar-colores parte del borrador de nivel 1 del módulo de barras de desplazamiento del Grupo de trabajo de CSS, que todavía es un trabajo en progreso al momento de escribir este artículo.
Antes scrollbar-color, los desarrolladores no tenían una forma estándar de cambiar la apariencia predeterminada de las barras de desplazamiento de un navegador sin recurrir a ocultar la barra de desplazamiento overflow: hiddeny representar barras de desplazamiento basadas en JavaScript o usar atributos de barra de desplazamiento con prefijo del navegador. Con scrollbar-color, por otro lado, podemos diseñar una barra de desplazamiento para que coincida con un diseño sin tener que recurrir a rehacer la funcionalidad del navegador o usar prefijos de proveedor.
.scrollable-element ( scrollbar-color: red yellow; )
scrollbar-colortambién aceptará valores de darky lightpara coincidir con las preferencias de un usuario si están usando algo como el modo oscuro en Mac OSX.
.scrollable-element ( scrollbar-color: dark; )A partir de marzo de 2019, el soporte darky los lightvalores no están disponibles en ningún navegador. es compatible con Firefox. Consulte la sección de compatibilidad del navegador a continuación para obtener más detalles.
Sintaxis
scrollbar-color: auto | dark | light | ;Valores
scrollbar-color acepta los siguientes valores:
autoes el valor predeterminado y representará los colores estándar de la barra de desplazamiento para el agente de usuario.darkle dirá al agente de usuario que use barras de desplazamiento más oscuras para que coincida con el esquema de color actual.lightle dirá al agente de usuario que use barras de desplazamiento más claras para que coincida con el esquema de color actual.especifica dos colores que se utilizarán para la barra de desplazamiento. El primer color es para el "pulgar" o la parte móvil de la barra de desplazamiento que aparece en la parte superior. El segundo color es para la "pista" o la parte fija de la barra de desplazamiento.
Ejemplo
Esto combina la sintaxis de la nueva especificación y el prefijo de WebKit.
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.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 91 * | 87 | 11 | 88 * | TP * |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 * | No | 81 * | 14,0-14,4 * |
Relacionado
scrollbar-gutterscrollbar-widthscrollbar
Recursos
- El estado actual de las barras de desplazamiento de estilo
- Barras de desplazamiento personalizadas en WebKit
- Borrador del módulo CSSWG Scrollbars
- Colección W3C de casos de uso para la modificación de la barra de desplazamiento
- Futuro de CSS: barras de desplazamiento en dev.to
- Edición de cromo 891944