Barras de desplazamiento CSS personalizadas elegantes y geniales: Demostración | trucos CSS

En este artículo, nos sumergiremos en el mundo de las barras de desplazamiento. Sé que no suena demasiado glamoroso, pero créeme, una página bien diseñada va de la mano con una barra de desplazamiento adecuada. La antigua barra de desplazamiento cromada no encaja tan bien.

Echaremos un vistazo a los detalles más finos de la barra de desplazamiento y luego veremos algunos ejemplos excelentes.

Componentes de la barra de desplazamiento

Es más una actualización, de verdad. Aquí hay un montón de publicaciones de trucos de CSS que profundizan en los detalles cuando se trata del estilo personalizado de la barra de desplazamiento de CSS.

Para diseñar una barra de desplazamiento, debe estar familiarizado con la anatomía de una barra de desplazamiento. Mira esta ilustración:

Los dos componentes principales a considerar aquí son:

1. los una canción es el fondo debajo de la barra.
2. los pulgar es la parte en la que el usuario hace clic y arrastra.

Podemos cambiar las propiedades de toda la barra de desplazamiento usando el prefijo del proveedor::-webkit-scrollbar selector. Podemos darle a la barra de desplazamiento un ancho fijo, un color de fondo, esquinas redondeadas... ¡muchas cosas! Si estamos personalizando la barra de desplazamiento principal de una página, podemos usar ::-webkit-scrollbar directamente en el elemento HTML:

html::-webkit-scrollbar {
  /* Style away! */
}

Si personalizamos un scrollbox, este es el resultado de overflow: scrollentonces podemos usar ::-webkit-scrollbar de este elemento en su lugar:

.element::-webkit-scrollbar {
  /* Style away! */
}

Aquí hay un ejemplo rápido que diseña la barra de desplazamiento del elemento HTML para que sea ancha con un fondo rojo:

¿Qué sucede si solo queremos cambiar el pulgar o la pista de la barra de desplazamiento? Lo has adivinado: tenemos pseudoelementos prefijados especiales para estos dos: ::-webkit-scrollbar-thumb y ::-webkit-scrollbar-trackrespectivamente. Aquí hay una idea de lo que es posible cuando juntamos todas estas cosas:

¡Basta de despeje! Quiero mostrarle tres grados de estilo de barra de desplazamiento personalizado, luego abra una gran muestra antigua de ejemplos extraídos de toda la web para inspirarse.

Barras de desplazamiento simples y elegantes

La barra de desplazamiento personalizada aún puede ser mínima. He reunido un grupo de ejemplos que cambian sutilmente el aspecto, ya sea con un ligero cambio en el color del pulgar o la pista, o con un ligero estilo de fondo.

Como puede ver, no necesitamos volvernos locos cuando se trata del estilo de la barra de desplazamiento. A veces, se necesita un cambio sutil para mejorar la experiencia general del usuario con una barra de desplazamiento que coincida con el tema general.

Barras de desplazamiento geniales y llamativas

Pero seamos realistas: es divertido ir un poco por la borda y ser un poco creativo. Aquí hay algunas barras de desplazamiento extrañas y únicas que pueden ser "demasiado" en algunos casos, pero seguro que llamarán la atención.

Otro…

¿Qué tal si tomamos la barra de desplazamiento para dar una vuelta en un tren de pulgar y canciones para, bueno, la pista?