Advertisement
  1. Web Design
  2. CSS

Consejo rápido: Estilizando las Barras de Scroll para que coincidan con tu diseño UI

by
Read Time:8 minsLanguages:

Spanish (Español) translation by David Castrillón (you can also view the original English article)

Este consejo te guiará para mejorar la apariencia de las barras de desplazamiento para que coincidan con tu diseño de interfaz de usuario. Echaremos un vistazo a lo que nos ofrecen los navegadores WebKit en términos de CSS, además vamos a usar un fallback de jQuery para atender a otros navegadores.

¿Buscando un atajo?

Si necesitas ayuda con los estilos de un componente en particular de su sitio web, puede ser más rápido obtener ayuda de un profesional. Envato cuenta con expertos dispuestos a ayudar con un  rediseño o la personalización de todo tipo de componentes web.

Web component services on Envato StudioWeb component services on Envato StudioWeb component services on Envato Studio

Nota Rápida sobre los Navegadores

Cuando nos referimos a los navegadores basados en Webkit esencialmente estamos hablando de Apple Safari y Google Chrome. Juntos  poseen actualmente más del 40% del mercado de los navegadores de escritorio en general. Para Tablets y el iPad de Apple siempre se usa Webkit sin importar de que compañía sea el navegador que se utilice. Google también ha agregado Chrome a su sistema operativo Android y los Chromebooks se basan por supuesto en Google Chrome.

Mirando estas cifras debe haber un futuro muy brillante para el estilo de las barras de desplazamiento.


Paso 1: Una página sencilla con barras de desplazamiento

Antes de que podamos empezar con el tema del estilo de barras de desplazamiento con CSS, necesitamos un demo funcional; una página con barras de desplazamiento. Las barras de desplazamiento pueden verse si:

  • El contenido es más grande que el área visible de una ventana (una barra de desplazamiento aparecerá a la derecha).
  • Un textarea contiene suficiente texto para que aparezcan las barras de desplazamiento.
  • Un iframe se utiliza para mostrar una página diferente.
  • Un div o cualquier otro elemento de bloque tiene su propiedad overflow establecida.

Para esta demostración vamos a ir con la última opción. Aquí está mi marcado inicial:

Es sólo un div con un montón de contenido ficticio. Y aquí está el CSS inicial, que establece algunas dimensiones fijadas y activa las barras de desplazamiento horizontales y verticales:

Tu deberías poder ver algo similar a esto:


Paso 2: Comenzando con los navegadores Webkit

Algún tiempo atrás (varios años) los Pseudo elementos de CSS fueron introducidos en los navegadores Webkit para apuntarle a las barras de desplazamiento, presentando la oportunidad de estilizar la página según tu tema.

Estilicemos algo, utilizando el prefiijo - webkit- y las propiedades personalizadas de la barra de desplazamiento. Ten en cuenta que me estoy pegando sólo a las propiedades básicas del CSS para facilitar su comprensión, con la explicación en los comentarios.

Cuando este pseudo elemento está presente, WebKit apagará el renderizado de su barra desplazamiento incorporaday tan solo usa la información proporcionada en CSS - Surfeando Safari

Y ahora algunos de los otros pseudo-elementos.

Después de agregar este CSS deberías poder ver el siguiente efecto (de nuevo, sólo en los navegadores WebKit).

¿Adivina qué? Internet Explorer tiene su propio estilo de barra de desplazamiento.

¡Eso está bien! - De hecho IE fue el primer navegador en brindar soporte al estilizado de las barras de desplazamiento a través del CSS. Esto fue en los días de IE5.5, but sólo se podía cambiar el color.

Estas propiedades pueden seguir siendo utilizadas hoy; Echa un vistazo a esta propiedad en IE 9 para fines de demostración:

Mira cómo se vería:


Paso 3: Fallback para Navegadores No Webkit 

Suficiente con WebKit. Firefox, IE y Opera también se pueden unir a la diversión. Para ellos tenemos un enfoque alternativo en la forma de jScrollPane. Este plugin de jQuery fue desarrollado por Kelvin Luck y será nuestro salvador del día.

El sitio web de Kelvin tiene un montón de buenos ejemplos, pero para su uso básico todo lo que necesitamos hacer es descargar jQuery y los archivos de jScrollPane y aplicarlos de la siguiente manera:

Sólo con el fin de hacerlo coincidir con nuestro tema, vamos a abrir jquery.jscrollpane.css y editar las siguientes líneas con nuestros valores de color (para mejoras en el rendimiento querás poner todos los estilos dentro de tus propios archivos):

Aquí hay un pantallazo de lo que verás en Firefox:


Conclusión

Aplicaciones web como Gmail y Google + (junto con muchos otros ejemplos) ya han adoptado la idea y si sigue este impulso, quizás Firefox y IE también proveerán sus propias soluciones.

¡Espero que te haya gustado este rápido tutorial y espero ver qué haces con las barras de desplazamiento en tu trabajo de diseño!


Recursos Adicionales

Barras de Desplazamiento Personalizadas en Envato Market

Si estás buscando una solución lista para usars, Envato Market ofrece una selección de barras de desplazamiento que se pueden conectar a tu sitio web para conseguir una gama de efectos. Aquí le damos un vistazo a algunos de ellos:

1. Lazybars - Plugin de Jquery para Barras de Desplazamiento Responsivas y Personalizables.

Lazybars es un plugin de jQuery fácil de utilizar y personalizable. Puedes implementar estas barras de desplazamiento sólo mediante la adición de un nombre de clase para cualquier elemento desplazable en tu sitio Web.

Haz uso de los temas que están incluidos en Lazybars, o crea los tuyos con un simple CSS.

Lazybars - Themeable responsive scrollbar jQuery pluginLazybars - Themeable responsive scrollbar jQuery pluginLazybars - Themeable responsive scrollbar jQuery plugin
1. Lazybars - Plugin de Jquery para Barras de Desplazamiento Responsivas y Personalizables.

2. Fancy Scrollbar - Para Wordpress

"Fancy Scrollbar - Para Wordpress" es un plugin que puede crear una barra de desplazamiento personalizada para sitios en Wordpress. Tiene un montón de opciones de personalización. Puedes personalizar color, efectos, demora en el scroll, banda del riel, y muchos parámetros más.

Fancy Scrollbar - WordPressFancy Scrollbar - WordPressFancy Scrollbar - WordPress
Fancy Scrollbar - Para Wordpress

3. Impresionante Barra de Desplazamiento Personalizada

Awesome Custom Scrollbar es un plugin para jQuery altamente personalizable para WordPress. Con este plugin puedes personalizar la barra de desplazamiento de tu sitio, y puedes incrustarlo mediante shortcodes donde quieras, incluso en los archivos de los temas.

Awesome Custom ScrollbarAwesome Custom ScrollbarAwesome Custom Scrollbar
Awesome Custom Scrollbar

4. DZS Scroller

DZS Scroller proporciona una barra de desplazamiento para el sitio que se puede personalizar muy fácilmente a través de CSS si los tres skins incluidos no son suficientes. También viene con una funcionalidad mejorada como desplazamiento por hover o fade en mouse leave. Y funciona en iPhone/iPad.

DZS ScrollerDZS ScrollerDZS Scroller
DZS Scroller

5. Estilos CSS3 de Scrollbar

Es fácil de usar la hermosa y colorida barra de desplazamiento de CSS3  en tu sitio web. Simplemente insértalo en el archivo CSS existente y disfruta de la nueva barra de desplazamiento de CSS3.

CSS3 Scrollbar StylesCSS3 Scrollbar StylesCSS3 Scrollbar Styles
Estilos de CSS3 Scrollbar
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.