Barra de desplazamiento CSS con medidor de progreso

Las barras de desplazamiento son medidores de progreso natural. La profundidad o el ancho de la barra de desplazamiento indica el progreso que se ha realizado al desplazarse por ese elemento (a menudo, toda la página). Pero son más indicadores de progreso que medidores, si piensas en un medidor como algo que se “llena” a medida que avanzas.

Podemos usar algunos trucos de CSS para hacer que la barra de desplazamiento se llene a medida que avanzamos.

Esto solo funcionará con -webkit-propiedades de estilo de barra de desplazamiento con prefijo del proveedor. En otras palabras, no son estándar. Las propiedades de estilo de barra de desplazamiento estandarizadas son scrollbar-widthy scrollbar-color, que no pueden lograr este tipo de cosas, pero probablemente sean una apuesta más segura a largo plazo. Aún así, las versiones con prefijo del proveedor probablemente no vayan a ninguna parte, por lo que si considera que esto es una forma extraña de mejora progresiva, probablemente esté bien.

¿Cuál es el truco?

Esencialmente, cuelga enorme box-shadowde la parte superior del pulgar de la barra de desplazamiento, o de un lado si se trata de un elemento de desplazamiento horizontal.

:root {  --shadow: #43a047;  --scrollbarBG: #eee;  --thumbBG: #66bb6a;}::-webkit-scrollbar {  width: 16px;}::-webkit-scrollbar-track {  background: var(--scrollbarBG);}::-webkit-scrollbar-thumb {  background-color: var(--thumbBG);  box-shadow: 0 -100vh 0 100vh var(--shadow), 0 0 15px 5px black;}

Manifestación

La primera vez que vi esto fue en un Pen de Myk.

Ese ejemplo no diferencia en absoluto la parte del pulgar de la barra de desplazamiento, lo que la hace más parecida a un medidor, pero también más difícil de usar. Mi demostración tiene un pulgar de color ligeramente diferente.

¿Realmente puedo usar esto?

¡No! Aparte de que es súper extraño y no estándar. Safari gira la tapa y no tengo idea de cómo arreglarlo.

Sin embargo, tengo un truco de CSS favorito que está muy relacionado con esto.

Quiero aprender más sobre cómo diseñar barras de desplazamiento.

Genial, aquí tienes.