Barra de desplazamiento CSS con medidor de progreso

 

 

 


Índice
  1. ¿Cuál es el truco?
  2. Manifestación
  3. ¿Realmente puedo usar esto?
  4. Quiero aprender más sobre cómo diseñar barras de desplazamiento.

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. Cutscenes

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.






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. ¿Cómo se hace el tamaño máximo de fuente en CSS?
  2. Cambiar el tamaño de los valores en pasos en CSS
  3. ¿Qué hace “revertir” en CSS?
  4. CSS4 es una mala idea

Barra de desplazamiento CSS con medidor de progreso

Barra de desplazamiento CSS con medidor de progreso

¿Cuál es el truco?Manifestación¿Realmente puedo usar esto?Quiero aprender más sobre cómo diseñar barras de desplazamiento.Tal vez te puede interesar:Ín

programar

es

https://pseint.es/static/images/programar-barra-de-desplazamiento-css-con-medidor-de-progreso-1424-0.jpg

2024-06-13

 

Barra de desplazamiento CSS con medidor de progreso
Barra de desplazamiento CSS con medidor de progreso

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences