Barras de scroll personalizadas

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

En el mundo del frontend hay que cuidar, cada día más, la apariencia de nuestros desarrollos web. Atrás quedaron ya los años en que bastaba con que una página funcionara correctamente, y que fuera “más o menos” bonita. En un mundo dominado, cada vez más, no sólo por la funcionalidad y facilidad de uso, sino también por la estética cuidada hasta el mínimo detalle, es muy importante “entrarle por los ojos” al visitante de nuestra web.

Las barras de scroll son un elemento visualmente muy importante y, con gran frecuencia, descuidadas por los frontenders. Es cierto que depende del tipo de sitio. En una web como, por ejemplo, esta misma, es un detalle completamente irrelevante, ya que el interés del visitante se centra en los contenidos. Sin embargo, suponte que te toca realizar una página para un estudio de fotografía, o una revista de moda. Ahí si que no puedes permitirte que el navegador dibuje las barras de scroll clásicas. En este artículo vamos a ver como solucionar esto, para poder contar con unas barras de scroll adecuadas a cada caso.

EL PROBLEMA

Tradicionalmente, cuando se trataba de personalizar las barras de scroll recurríamos al CSS de toda la vida y, con mayor o menor esfuerzo, lográbamos uno resultado aceptable. Sin embargo, esto no era una solución, por muchas razones. La principal es la tradicional incompatibilidad entre navegadores. El CSS que probábamos y depurábamos para, por ejemplo, Firefox, funcionaba de otro modo cuando cargábamos la página en Opera o Safari, por ejemplo. Y, desde luego, no funcionaba ni bien ni mal si usábamos el infame Internet Explorer. Esto nos obligaba a cargar distintas hojas de estilos de forma dinámica, dependiendo del navegador del usuario, y no siempre lográbamos los resultados deseados.

Para terminar de complicar las cosas, empezaron a aparecer en Internet algunas hojas de estilos para barras de scroll bastante atractivas, pero que, una vez más, sólo funcionaban bien en determinados navegadores.

Estas incompatibilidades en la forma de tratar un elemento que es tan dependiente del navegador como las barras de scroll contribuyeron a que este haya sido un elemento muy descuidado en el desarrollo frontend.

LA SOLUCIÓN

Afortunadamente, con la ayuda de JavaScript, jQuery y CSS, algunos desarrolladores han creado plugins muy fáciles de implementar, ligeros, muy eficientes y, sobre todo, compatibles con todos los navegadores actuales (subrayo la palabra “actuales” porque, está claro, si alguien mantiene un navegador de hace cinco años y no lo ha actualizado, evidentemente habrá muchas cosas que no le funcionen).

En concreto, aquí nos vamos a centrar en el plugin jQuery custom content scroller. Su página oficial la puedes encontrar en este enlace. Lo primero que deberías hacer es descargarte el plugin completo. Puedes hacerlo desde el enlace de descarga de la página oficial, o desde este otro enlace. Como ves, es una gran cantidad de archivos pero, para usar el plugin en tus proyectos, sólo necesitará unos pocos.

En este enlace tienes un ejemplo de uso con la configuración mínima necesaria. El plugin tiene gran cantidad de opciones y temas para adaptarse siempre a lo que puedas necesitar. No vamos a entrar aquí en detalles al respecto, porque la documentación oficial es muy clara y detallada al respecto, y sería repetirnos.

En cuanto lo uses, verás lo amigable que es de utilizar, y el efecto tan sorprendente que logras. Los temas para elegir los tienes en este enlace.

     

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *