() translation by (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.
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
textareacontiene suficiente texto para que aparezcan las barras de desplazamiento. - Un
iframese utiliza para mostrar una página diferente. - Un
divo cualquier otro elemento de bloque tiene su propiedadoverflowestablecida.
Para esta demostración vamos a ir con la última opción. Aquí está mi marcado inicial:
1 |
<div class="container"> |
2 |
|
3 |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus tortor eget orci fringilla non semper magna aliquet. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend. In hac habitasse platea dictumst. In at felis massa. Maecenas vitae quam non elit porta pellentesque ac in erat. Nullam a ante felis, ullamcorper suscipit felis. Maecenas sit amet nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> |
4 |
|
5 |
<p>Sed sed tellus dolor, non lobortis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget nisl viverra risus feugiat vulputate tempus et leo. Nam metus nibh, tristique non sodales non, interdum et neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet aliquet vestibulum. Curabitur viverra tortor augue, a aliquet tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis. Proin adipiscing malesuada enim, et feugiat tortor sagittis eu. Cras convallis felis eu leo tempus et fermentum urna accumsan. In quis metus at metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim et quis est.</p> |
6 |
|
7 |
<p>Praesent sodales, sapien sit amet congue egestas, sem ligula ornare massa, vitae suscipit felis ligula quis velit. Phasellus lectus massa, sodales ac vulputate ac, pharetra quis lacus. Morbi tempus pretium nisi sed pretium. Pellentesque dictum volutpat vulputate. Fusce dapibus sagittis felis, ut consequat nisi posuere id. Cras elit orci, vehicula in sagittis a, faucibus vitae dui. Nunc non lorem in metus adipiscing adipiscing non a sapien. Sed dictum ultrices nibh in tristique. Nulla dapibus laoreet tincidunt. Sed accumsan erat quis mi luctus porta.</p> |
8 |
|
9 |
<p>Sed mollis justo enim, ut pharetra nunc. Fusce vehicula viverra magna, et fringilla lectus porta quis. Donec eu fermentum mi. Donec congue pellentesque iaculis. Phasellus est leo, cursus eget consectetur in, tristique sit amet tortor. Cras eleifend felis sit amet eros vehicula aliquet. Pellentesque fringilla metus in libero luctus eu condimentum nulla pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat sodales lorem, nec dignissim turpis pharetra et. Nullam commodo hendrerit elementum. Donec porta faucibus ligula non blandit. In ultrices vehicula pretium.</p> |
10 |
|
11 |
<p>Sed ac sagittis sapien. Curabitur varius pellentesque nunc eget molestie. Vivamus in massa arcu, ut auctor tellus. Aliquam convallis lobortis magna, ut posuere odio euismod ac. Vestibulum in enim vitae metus vulputate interdum. Mauris a risus auctor nunc fermentum dapibus. Proin iaculis, nunc ut viverra varius, augue augue porta libero, id viverra nisl elit in mauris. Aenean quis risus ante. Donec bibendum erat a sem vestibulum eu aliquet lectus tincidunt. Vivamus imperdiet congue leo, non ultricies urna sodales sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla vitae rhoncus dui. Nunc in nisi in ante imperdiet tincidunt sagittis eu ipsum. Aenean orci justo, faucibus placerat tincidunt vitae, vehicula at libero.</p> |
12 |
|
13 |
</div>
|
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:
1 |
.container { |
2 |
width: 400px; |
3 |
height: 300px; |
4 |
background-color: #DCDCDC; |
5 |
overflow: scroll; /* showing scrollbars */ |
6 |
}
|
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.
1 |
::-webkit-scrollbar { |
2 |
width: 15px; |
3 |
} /* this targets the default scrollbar (compulsory) */ |
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.
1 |
::-webkit-scrollbar-track { |
2 |
background-color: #b46868; |
3 |
} /* the new scrollbar will have a flat appearance with the set background color */ |
4 |
|
5 |
::-webkit-scrollbar-thumb { |
6 |
background-color: rgba(0, 0, 0, 0.2); |
7 |
} /* this will style the thumb, ignoring the track */ |
8 |
|
9 |
::-webkit-scrollbar-button { |
10 |
background-color: #7c2929; |
11 |
} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */ |
12 |
|
13 |
::-webkit-scrollbar-corner { |
14 |
background-color: black; |
15 |
} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */ |
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:
1 |
body { |
2 |
scrollbar-face-color: #b46868; |
3 |
}
|
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:
1 |
<!-- this cssfile can be found in the jScrollPane package -->
|
2 |
<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" /> |
3 |
|
4 |
<!-- latest jQuery direct from google's CDN -->
|
5 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> |
6 |
<!-- the jScrollPane script -->
|
7 |
<script type="text/javascript" src="jquery.jscrollpane.min.js"></script> |
8 |
|
9 |
<!--instantiate after some browser sniffing to rule out webkit browsers-->
|
10 |
<script type="text/javascript"> |
11 |
|
12 |
$(document).ready(function () { |
13 |
if (!$.browser.webkit) { |
14 |
$('.container').jScrollPane(); |
15 |
}
|
16 |
});
|
17 |
|
18 |
</script>
|
19 |
|
20 |
</body>
|
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):
1 |
.jspTrack
|
2 |
{
|
3 |
background: #b46868; /* changed from #dde */ |
4 |
position: relative; |
5 |
}
|
6 |
|
7 |
.jspDrag
|
8 |
{
|
9 |
background: rgba(0,0,0,0.2); /* changed from #bbd */ |
10 |
position: relative; |
11 |
top: 0; |
12 |
left: 0; |
13 |
cursor: pointer; |
14 |
}
|
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 WebKit por Chris Coyier
- Estilizando las Barras de Desplazamiento en webkit.org
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.
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.
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.
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.
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.
