Como vemos, primero hemos incluido dentro del head de la página el script con el framework de Mootools, con la etiqueta <script> .
Luego hemos creado una capa con un texto y una serie de estilos CSS para que tenga un tamaño definido, que no permita ver el contenido completo del texto, y unas barras de desplazamiento para hacer el scroll.
A continuación hay un script que crea una variable global a la página que contiene la capa que queremos desplazar.
<script>
capa_desplazar = $('texto_scroll');
</script>
Luego hay un par de enlaces que son los que, pulsándolos, desplazará automáticamente el texto arriba o abajo.
<a href="javascript:capa_desplazar.scrollTo(0, capa_desplazar.getSize().scroll.y + 20);">Abajo</a>
Con "javascript:" metido en un href de un enlace, estamos indicando que se tiene que ejecutar esa sentencia javascript al pulsar el link. Y la sentencia es:
capa_desplazar.scrollTo(0, capa_desplazar.getSize().scroll.y + 20);
Eso indica que en la variable de la capa que habíamos creado antes, capa_desplazar, se tiene que ejecutar el método scrollTo(). Este método recibe como primer parámetro 0, porque no queremos desplazarlo horizontalmente. Luego como desplazamiento vertical ponemos el desplazamiento vertical del elemento + 20 píxel. El desplazamiento vertical actual del elemento lo sacamos con capa_desplazar.getSize().scroll.y, tal como habíamos explicado antes en este artículo.
El enlace de para desplazar el scroll hacia arriba sería muy similar al que acabamos de ver.
<a href="javascript:capa_desplazar.scrollTo(0, capa_desplazar.getSize().scroll.y - 20);">Arriba</a>
La única diferencia es que ahora hacemos un scrollTo() a cero en la horizontal y a el scroll actual - 20 píxel.
Espero que se haya entendido el ejemplo. Podemos ir a la documentación de Mootools, del módulo Element.Dimensions.js para obtener la descripción completa de los métodos que hemos utilizado.
Hasta aquí en este manual hemos visto un par de ejemplos muy simples sobre Mootools, este segundo un poco más práctico. Pero el objetivo no es sino expresar por medio de un código la sencillez con la que se programa con Mootools para conseguir efectos que de otra manera nos hubiera costado mucho trabajo programar. Y todo compatible con los navegadores más habituales.
Usuarios que han visto este tema también han visto...
- Cómo pasar variables entre páginas con javascript
- La sombra se mueve en Javascript
- Tiempo desde el inicio del año en Javascript
- Listado de distintos Framework Javascript
- Capa Deslizante
- Versión imprimible de este documento
- Enviar por e-mail este documento
