Scroll con Mootools

Vamos a otro ejemplo sencillo con Mootools para crear un scroll en una capa de la página.

Para continuar el manual de Mootools, vamos a ver un segundo ejemplo de gran sencillez para hacer un scroll en una capa por Javascript. Este sistema de scroll o desplazamiento sería muy complejo de hacer sin la ayuda del framework como Mootools. Nosotros lo vamos a hacer con una simple ejecución de una sentencia Javascript.

El presente ejemplo utiliza el módulo llamado Element.Dimensions.js, que tiene dos métodos que nos van a servir para hacer el desplazamiento:

Método scrollTo()
Sirve para desplazar un elemento a una nueva posición. Recibe dos parámetros, las coordenadas X e Y a las que queremos desplazar el scroll del elemento.

Método getSize()
Sirve para obtener las dimensiones de un elemento, así como la posición actual del scroll o desplazamiento que se haya realizado sobre el mismo. Devuelve un objeto con una serie de propiedades que son las informaciones sobre tamaño y desplazamiento del elemento. Entre las propiedades tiene la que nos interesa, que se llama scroll y a su vez, scroll tiene dos propiedades que son las X e Y del scroll que se haya realizado. Por ejemplo:

mielemento.getSize().scroll.x
Nos devolvería los píxel que se haya desplazado el elemento mielemento en la horizontal.
mielemento.getSize().scroll.y
Nos devolvería el desplazamiento vertical que se haya realizado sobre el elemento mielemento.

El código de este sencillo ejemplo es el siguiente:

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
   <title>Ejemplo 2 con Mootools</title>
   <script src="mootools-comprimido-1.11.js" type="text/javascript"></script>
</head>

<body>

<div id="texto_scroll" style="overflow: auto; height: 70px; width: 400px;">
   <div style="width:100%;">
   Hola, esto es un texto que voy a poner de prueba para hacer un scroll rápidamente con Mootools.
   <br>
   La verdad es que este framework de javscript funciona muy bien y permite un desarrollo sorprendentemente rápido.
   <br>
   En pocos pasos y con absolutamente ningún conocimiento del Framework he conseguido hacer esta página. Me he ayudado de la documentación y de unos ejemplos que he encontrado en la página: http://clientside.cnet.com/wiki/mootorial/
   <br>
   Ahora tendría que intentar ir poco a poco para conocer todo el funcionamiento en detalle.
   </div>

</div>
<br>
<script>
capa_desplazar = $('texto_scroll');
</script>
<a href="javascript:capa_desplazar.scrollTo(0, capa_desplazar.getSize().scroll.y + 20);">Abajo</a> // <a href="javascript:capa_desplazar.scrollTo(0, capa_desplazar.getSize().scroll.y - 20);">Arriba</a>

</body>
</html>

Usuarios que han visto este tema también han visto...

- Gestión de eventos en JavaScript
- Seleccionar y copiar formulario con Javascript
- Contadores de Fecha
- Imágenes con efecto polaroid usando JavaScript
- Frase al azar con Javascript

- Versión imprimible de este documento

- Enviar por e-mail este documento