Barras de desplazamiento personalizadas Mixin - Trucos CSS

Tabla de contenido

Las barras de desplazamiento son uno de esos componentes de la interfaz de usuario que están presentes en casi todas las páginas de Internet, pero nosotros (los desarrolladores) tenemos poco o ningún control sobre ellas. Algunos navegadores nos brindan la posibilidad de personalizar su apariencia, pero para la mayoría de los navegadores, incluido Firefox, simplemente no es posible.

Ha habido algunas actualizaciones y estandarización en el estilo de las barras de desplazamiento. Consulte El estado actual de las barras de desplazamiento de estilo para obtener la última información, que podría transferir a un mixin.

Aún así, Chrome e Internet Explorer (sí) nos permiten definir estilos personalizados para las barras de desplazamiento. Sin embargo, la sintaxis es terriblemente compleja y, por supuesto, definitivamente no es estándar. Bienvenido al mundo de los propietarios. Es por eso que es posible que desee tener un poco de mezcla para personalizar fácilmente sus barras de desplazamiento. ¿Correcto?

@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) ( // For Google Chrome &::-webkit-scrollbar ( width: $size; height: $size; ) &::-webkit-scrollbar-thumb ( background: $foreground-color; ) &::-webkit-scrollbar-track ( background: $background-color; ) // For Internet Explorer & ( scrollbar-face-color: $foreground-color; scrollbar-track-color: $background-color; ) )

Uso:

body ( @include scrollbars(10px, pink, red); ) .custom-area ( @include scrollbars(.5em, slategray); )

Ejemplo

Vea el mixin de Pen Sass para el estilo de la barra de desplazamiento de Hugo Giraudel (@HugoGiraudel) en CodePen.

Ir más lejos

En ambos navegadores, hay muchas más opciones además de color y tamaño. Sin embargo, a menudo se pasan por alto, por lo que no creo que valga la pena abarrotar la mezcla con estas opciones. Siéntase libre de crear un mixin más avanzado con opciones adicionales.

Lecturas adicionales: