SummArg | Cursos y recursos para webmasters

24/01/2012

Cambiar el estilo de las barra de desplazamiento -scrollbars- con jQuery Scroll

Las barras de desplazamiento o scrollbars son esos elementos en una web cuyo estilo normalmente estará determinado por el navegador del usuario. Sin embargo hay formas de cambiarlo y forzar a todos los navegadores a que utilicen el estilo que nosotros queremos.

En este caso queremos mencionar a jQuery Scroll, un plugin que nos ayuda en la tarea. Para aplicarlo en un proyecto primero lo descargamos y lo anexamos a nuestro proyecto. Entre etiquetas <head> colocamos el link al css.

<link href="css/scrollbar.css" type="text/css" rel="stylesheet" />

Y antes del cierre de la etiqueta body, colocamos el link a jQuery, al plugin y las líneas necesarias para aplicarlo a una clase de nuestra elección.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!--[if !IE]>
<script type="text/javascript" src="jquery.scroll.min.js"></script>
<script type="text/javascript">
$('.scrollbar').scrollbar();
</script>
<![endif]-->

Funciona en todos los navegadores excepto Internet Explorer (en su lugar, se verá la barra común de scroll).

Otra buena opción para considerar es flexscroll

Descarga

Dejar un comentario