Acabo de publicar Regala Google Chrome por navidad |

FleXcroll: scrollbars personalizadas

By Miguel Ángel Jiménez Achinte On 19:16

Antes que nada, quiero agradecer a todos por tenerme paciencia...han sido unos dias muy ocupados y lamentablemente no he podido mantener mi querido blog como siempre.

Hace unos dias Xabier me preguntaba como hacer que las scrollbars (las barras de desplazamiento de los navegadores) personalizados tambien se visualizen en mozilla y no solo en internet explorer. Me acordé que hace mucho trabajé con un script qu me lo permitió y he querido compartirlo debido a que los resultados son sorprendentes y que muy bien :)

Primero que todo debemos adjuntar a la plantilla el archivo javascript y el css de FleXcroll:

<link href="url-flexcrollstyles.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src="url-flexcroll.js"></script>

Despues de adjuntar el script y el css, lo primero será crear la capa (div) a la que le queremos agregar el scroll personalizado. En este ejmplo se llamará "miscroll". Es importante y no se debe olvidar que la capa debe tener como clase la palabra flexcroll.

<div id="miscroll" class="flexcroll">
...el contenido debe ir aqui...
<div>

A esta capa vamos a añadirle algunos estilos:

#miscroll {
width: 200px;
height: 100px;
overflow: auto;
background: #D5EADE;
padding: 10px;
}

Donde la propiedad overflow determina si se aplica o no el scroll, en este caso (auto) las barras solo aparecen si el contenido es mayor a las dimensiones de la capa dadas en width (ancho) y height (alto).

Añadiendo un poco de texto nuestro ejemplo deberá verse asi:


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ultrices facilisis risus. Aenean sollicitudin imperdiet justo. Nam sed nulla sed metus blandit pretium. Morbi odio. Maecenas vestibulum dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam in elit. Nam venenatis urna id diam. Quisque porta. Sed ultricies, sem vel gravida mollis, pede lectus vehicula orci, quis sodales mauris velit vitae dui. Sed tincidunt mauris ut libero. Suspendisse potenti. Praesent adipiscing. Sed sem. Ut non justo. Cras pretium nibh scelerisque nibh hendrerit venenatis.
Nullam lobortis, dui nec accumsan molestie, ligula libero porta urna, in tincidunt ante lacus ac diam. Vestibulum erat risus, scelerisque non, mattis sit amet, aliquet convallis, enim. Sed mattis. Phasellus tristique. Nullam metus ipsum, sagittis at, tempor non, consectetuer eget, massa. Curabitur metus lacus, fringilla ac, interdum condimentum, hendrerit non, est. Morbi iaculis. Aenean lacus lectus, lacinia eget, hendrerit id, imperdiet ac, nisl. Praesent metus. Morbi mi elit, lacinia fringilla, luctus ut, tempor at, diam. Nulla arcu nibh, condimentum fringilla, nonummy et, volutpat eget, orci. Suspendisse et dui. Integer eget lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse vitae odio. Sed risus nisl, mattis vitae, imperdiet et, semper nec, tellus. Quisque adipiscing, neque id faucibus fringilla, eros augue ultricies orci, quis tincidunt tortor elit gravida ligula. Suspendisse suscipit sem sit amet ipsum. Etiam elit.
Aenean ullamcorper leo a neque. Ut eros risus, ornare sed, luctus sit amet, mollis ut, nisl. Proin dui. Aliquam suscipit. Vestibulum nisl wisi, eleifend at, placerat et, lobortis vitae, dui. Nulla dapibus pretium nulla. In hac habitasse platea dictumst. Cras ultricies nisl eu est. Aliquam ultrices, orci in dapibus facilisis, tortor pede bibendum neque, eget vestibulum lectus wisi vitae orci. Phasellus quis metus. In turpis diam, varius in, pulvinar sit amet, commodo ut, wisi. Donec leo nibh, iaculis in, facilisis non, mollis eget, eros. Morbi sem.
Nunc sed arcu. Phasellus euismod tincidunt eros. Proin ac purus. In dictum ante vitae libero. Proin pede. Pellentesque tellus ipsum, semper quis, dapibus eget, ultricies ac, pede. Aenean tristique tincidunt lorem. Aenean eget eros quis tellus tincidunt condimentum. Aliquam tempor, erat sit amet condimentum sagittis, ante sapien dapibus lectus, in tempor mauris sem non metus. Nam id orci. Nulla dignissim, felis in euismod tempor, neque turpis suscipit urna, id tristique mauris eros et dui.
Aliquam eget felis id elit congue tempus. Maecenas a velit. Sed egestas malesuada sapien. In sapien. Integer sit amet massa vitae justo vulputate viverra. Fusce suscipit, mi a lacinia lobortis, urna enim consectetuer risus, et ultrices ante nulla nec mauris. Integer pulvinar aliquet turpis. Phasellus fermentum diam at mauris. Ut nulla est, rhoncus sed, malesuada eget, rutrum ac, nunc. Curabitur in ante.
Aenean ullamcorper leo a neque. Ut eros risus, ornare sed, luctus sit amet, mollis ut, nisl. Proin dui. Aliquam suscipit. Vestibulum nisl wisi, eleifend at, placerat et, lobortis vitae, dui. Nulla dapibus pretium nulla. In hac habitasse platea dictumst. Cras ultricies nisl eu est. Aliquam ultrices, orci in dapibus facilisis, tortor pede bibendum neque, eget vestibulum lectus wisi vitae orci. Phasellus quis metus. In turpis diam, varius in, pulvinar sit amet, commodo ut, wisi. Donec leo nibh, iaculis in, facilisis non, mollis eget, eros. Morbi sem.
Nunc sed arcu. Phasellus euismod tincidunt eros. Proin ac purus. In dictum ante vitae libero. Proin pede. Pellentesque tellus ipsum, semper quis, dapibus eget, ultricies ac, pede. Aenean tristique tincidunt lorem. Aenean eget eros quis tellus tincidunt condimentum. Aliquam tempor, erat sit amet condimentum sagittis, ante sapien dapibus lectus, in tempor mauris sem non metus. Nam id orci. Nulla dignissim, felis in euismod tempor, neque turpis suscipit urna, id tristique mauris eros et dui.
Aliquam eget felis id elit congue tempus. Maecenas a velit. Sed egestas malesuada sapien. In sapien. Integer sit amet massa vitae justo vulputate viverra. Fusce suscipit, mi a lacinia lobortis, urna enim consectetuer risus, et ultrices ante nulla nec mauris. Integer pulvinar aliquet turpis. Phasellus fermentum diam at mauris. Ut nulla est, rhoncus sed, malesuada eget, rutrum ac, nunc. Curabitur in ante.


Si quieres que tambien aparezca la barra horizontal hay que añadir dentro de miscroll otra capa con un ancho mayor, algo como esto:

#miscrollHorizontal {
width:300px;
}

y el html debe quedar asi:

<div id="miscroll" class="flexcroll">
<div id="miscrollHorizontal">
...el contenido debe ir aqui...
</div>
<div>

nos debe quedar asi:


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ultrices facilisis risus. Aenean sollicitudin imperdiet justo. Nam sed nulla sed metus blandit pretium. Morbi odio. Maecenas vestibulum dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam in elit. Nam venenatis urna id diam. Quisque porta. Sed ultricies, sem vel gravida mollis, pede lectus vehicula orci, quis sodales mauris velit vitae dui. Sed tincidunt mauris ut libero. Suspendisse potenti. Praesent adipiscing. Sed sem. Ut non justo. Cras pretium nibh scelerisque nibh hendrerit venenatis.
Nullam lobortis, dui nec accumsan molestie, ligula libero porta urna, in tincidunt ante lacus ac diam. Vestibulum erat risus, scelerisque non, mattis sit amet, aliquet convallis, enim. Sed mattis. Phasellus tristique. Nullam metus ipsum, sagittis at, tempor non, consectetuer eget, massa. Curabitur metus lacus, fringilla ac, interdum condimentum, hendrerit non, est. Morbi iaculis. Aenean lacus lectus, lacinia eget, hendrerit id, imperdiet ac, nisl. Praesent metus. Morbi mi elit, lacinia fringilla, luctus ut, tempor at, diam. Nulla arcu nibh, condimentum fringilla, nonummy et, volutpat eget, orci. Suspendisse et dui. Integer eget lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse vitae odio. Sed risus nisl, mattis vitae, imperdiet et, semper nec, tellus. Quisque adipiscing, neque id faucibus fringilla, eros augue ultricies orci, quis tincidunt tortor elit gravida ligula. Suspendisse suscipit sem sit amet ipsum. Etiam elit.
Aenean ullamcorper leo a neque. Ut eros risus, ornare sed, luctus sit amet, mollis ut, nisl. Proin dui. Aliquam suscipit. Vestibulum nisl wisi, eleifend at, placerat et, lobortis vitae, dui. Nulla dapibus pretium nulla. In hac habitasse platea dictumst. Cras ultricies nisl eu est. Aliquam ultrices, orci in dapibus facilisis, tortor pede bibendum neque, eget vestibulum lectus wisi vitae orci. Phasellus quis metus. In turpis diam, varius in, pulvinar sit amet, commodo ut, wisi. Donec leo nibh, iaculis in, facilisis non, mollis eget, eros. Morbi sem.
Nunc sed arcu. Phasellus euismod tincidunt eros. Proin ac purus. In dictum ante vitae libero. Proin pede. Pellentesque tellus ipsum, semper quis, dapibus eget, ultricies ac, pede. Aenean tristique tincidunt lorem. Aenean eget eros quis tellus tincidunt condimentum. Aliquam tempor, erat sit amet condimentum sagittis, ante sapien dapibus lectus, in tempor mauris sem non metus. Nam id orci. Nulla dignissim, felis in euismod tempor, neque turpis suscipit urna, id tristique mauris eros et dui.
Aliquam eget felis id elit congue tempus. Maecenas a velit. Sed egestas malesuada sapien. In sapien. Integer sit amet massa vitae justo vulputate viverra. Fusce suscipit, mi a lacinia lobortis, urna enim consectetuer risus, et ultrices ante nulla nec mauris. Integer pulvinar aliquet turpis. Phasellus fermentum diam at mauris. Ut nulla est, rhoncus sed, malesuada eget, rutrum ac, nunc. Curabitur in ante.
Aenean ullamcorper leo a neque. Ut eros risus, ornare sed, luctus sit amet, mollis ut, nisl. Proin dui. Aliquam suscipit. Vestibulum nisl wisi, eleifend at, placerat et, lobortis vitae, dui. Nulla dapibus pretium nulla. In hac habitasse platea dictumst. Cras ultricies nisl eu est. Aliquam ultrices, orci in dapibus facilisis, tortor pede bibendum neque, eget vestibulum lectus wisi vitae orci. Phasellus quis metus. In turpis diam, varius in, pulvinar sit amet, commodo ut, wisi. Donec leo nibh, iaculis in, facilisis non, mollis eget, eros. Morbi sem.
Nunc sed arcu. Phasellus euismod tincidunt eros. Proin ac purus. In dictum ante vitae libero. Proin pede. Pellentesque tellus ipsum, semper quis, dapibus eget, ultricies ac, pede. Aenean tristique tincidunt lorem. Aenean eget eros quis tellus tincidunt condimentum. Aliquam tempor, erat sit amet condimentum sagittis, ante sapien dapibus lectus, in tempor mauris sem non metus. Nam id orci. Nulla dignissim, felis in euismod tempor, neque turpis suscipit urna, id tristique mauris eros et dui.
Aliquam eget felis id elit congue tempus. Maecenas a velit. Sed egestas malesuada sapien. In sapien. Integer sit amet massa vitae justo vulputate viverra. Fusce suscipit, mi a lacinia lobortis, urna enim consectetuer risus, et ultrices ante nulla nec mauris. Integer pulvinar aliquet turpis. Phasellus fermentum diam at mauris. Ut nulla est, rhoncus sed, malesuada eget, rutrum ac, nunc. Curabitur in ante.


El creador, www.hesido.com, nos ofrece una cantidad de ejemplos en esta carpeta comprimida. Para cambiar la imagen de cada barra tendrás que modificar el archivo css llamado flexcrollstyles correspondiente en cada ejemplo.





14 comentarios

  1. hola Miguel :D
    Como madre argentina te digo estudia y estudia, luego te diviertes con el blog y todas sus cositas...que en unos años me tienes que rendir cuenta de como vá tu carrera...motones de besitos :P

    Posted on 9/20/2009 5:01 a. m.

     
  2. Tienes toda la razon Graciela, muchas gracias como siempre por tu apoyo :)
    un gran abrazo para ti :P

    Posted on 9/20/2009 9:09 a. m.

     
  3. Que bueno tenia ganas de poder hacer algo asi en firefox ademas los efectos son muy copados, la unica pega es que necesitas de un script externo pero igualmente unos kb mas a la plantilla no presentan problemas je

    Posted on 10/02/2009 5:57 p. m.

     
  4. Es muy interesante el hecho de que funcione en firefox, tambien en internet expolorer...aunque parece que tanta cosa en este blog no lo deja visualizar pero puedes ir a la pagina del autor :)

    Posted on 10/02/2009 6:46 p. m.

     
  5. hola estoy tratando de encerrar mis post en una caja...como lo que esta aqui arriba y no se como hacerlo
    http://evoluciondainichi.blogspot.com/

    Posted on 10/25/2009 7:50 p. m.

     
  6. Te refieres a una caja con barras de desplazamiento?

    Tienes que poner la zona de las entradas en una capa y mediante estilo darle un ancho o alto determnado (o ambas cosas). Tal vez te interese estas lista de partes en la plantilla de blogger: parte 1 - parte 2 - parte 3

    si quieres muestrame el codigo que tienes y te ayudo a mejorarlo.

    Posted on 10/26/2009 2:30 p. m.

     
  7. Ya esta funcinando,utilizo tu alojamineto... ;) habia encontrado el script pero no era capaz de ponerlo en bloger .Gracias, un saludo desde Asturias.

    Posted on 10/30/2009 6:25 a. m.

     
  8. No hay problema, si algun dia cambio los archivos publicaré una entrada comunicandolo. :)

    Posted on 10/30/2009 6:31 p. m.

     
  9. Soy un poquito negada y no he conseguido aun hacerlo funcionar en mi blog, pero cuando lo consiga, os lo hare saber y os comentare como.

    Posted on 11/22/2009 7:56 a. m.

     
  10. Si quieres muéstrame como lo estas haciendo y quizá pueda ayudarte.

    Posted on 11/22/2009 10:39 a. m.

     
  11. ¿Dónde se pueden conseguir mas estilos de flexcroll?
    No me veo capaz de editarlo ya que lo vincula con imagenes y no me manejo con el photoshop como para hacer yo uno.

    Gracias

    Posted on 1/18/2012 9:55 a. m.

     
  12. Hola Cesar, puedes mirar la pagina web del proyecto: http://www.hesido.com/web.php?page=customscrollbar

    Posted on 1/18/2012 5:52 p. m.

     

Publicar un comentario en la entrada al viejo estilo