Como Personalizar un Scrollbar con CSS Para Todos los Navegadores

3 minuto(s)

Demo Github

En ocasiones necesitamos personalizar el Scrollbar de nuestros sitios web. Esto es posible hacerse con CSS, vamos a darle soporte para los navegadores que estan basados en Chromiun (Google Chrome, Opera, Edge, Vivaldi, etc.) y también en Mozilla Firefox. Estos navegadores son los que más uso tienen o son los más populares en el rubro. En este Post te enseñare a Como Personalizar un Scrollbar con CSS Para Todos los Navegadores, vamos con ello.

Antes de continuar te invito a leer los siguiente artículos:

Asimismo, te invito a escuchar el Podcast: “Como Hacer De La Programación Un Estilo De Vida“La Inteligencia Artificial (IA) y el Machine Learning (ML) Siempre Trabajan de la Mano” (Anchor Podcast): 

Spotify: Sound Cloud: Apple Podcasts Anchor Podcasts

Bien ahora continuemos con el Post: Como Personalizar un Scrollbar con CSS Para Todos los Navegadores. 

HTML

Voy a crear 2 ejemplos, uno será para mostrar un scrollbar por defecto y otro para mostrar nuestro scrollbar personalizado. He creado 2 clases llamadas .scrollbar y .scrollbar-personalizado, tu puedes aplicarlo directamente al body o la ventana del navegador:


Estoy usando clases del framework Bootstrap como col-6, etc., pero no te alarmes, es solo para hacer responsive el diseño de la web, ya que la personalización del scrollbar la haremos con puro CSS y nada de frameworks o herramientas adicionales.

CSS

Primero agregaré soporte para el navegador Mozilla Firefox:


Ahora daré soporte para los navegadores basados en Chromiun, como Google Chrome, Opera, Edge, etc.:


Por último agrego unos estilos para que se visualicen de manera correcta los 2 scrollbars de ejemplo:


Entonces si voy al navegador, debería de ver los 2 scrollbars sin problema:

Al inicio de este Post he colocado una Demo y un enlace a su repositorio GitHub con el código fuente del proyecto.

Conclusión

En este Post hemos aprendido a personalizar el elemento scrollbar que solemos ver en los navegadores y ventanas en donde se haga uso de él.

Nota (s)

  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.