AJAX24

Componentes y Efectos AJAX

Suscríbete vía Email

Monitoriza el scroll con e24ScrollEvents para mootools

Introducción
Hace muy poco David Walsh publicó en su blog ScrollSpy, un plug-in con objetivos muy similares a e24ScrollEvents. En ese momento ya tenía algo adelantado de e24ScrollEvents para un proyecto en el que trabajaba y no desistí de su desarrollo porque creo que tiene algunos añadidos que hacen que sea muy fácil de usar. Compáralos y usa el que mejor se ajuste a tus necesidades.

e24ScrollEvents es un plug-in para Mootools que permite detectar qué elementos son visibles según la posición del scroll de la página. Para ello añade dos nuevos eventos a la clase Element de Mootools que se activan cuando el elemento aparece en el área visible o se oculta.

Demos
Demo1: Galería de Fotos Ajax
Demo2: Ejemplo Básico

¿Cómo utilizarlo?
Incluye Mootools 1.2.2 Core dentro del header del código HTML de la página. Puedes generar una versión de la librería de tamaño óptimo desde el Mootools Core Builder, seleccionando DOMReady, Element.Dimensions, Element.Style, Element.Events, Class.Extras y todas sus dependencias. Y además incluye e24ScrollEvents después de ambos:

1
2

<script src="js/mootools-1.2.2-core-nc.js" type="text/javascript"></script>
<script src="js/e24scrollevents-1.0.js" type="text/javascript"></script>

Ahora veremos el código javascript necesario para comenzar a observar el scroll. Primero añadimos los controladores para los nuevos eventos “visible” y “hidden”. Supongamos que tenemos dos elementos “el1″ y “el2″ que nos interesa enterarnos cuando aparezcan en el área visible.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var el1 = $('el1');
el1.addEvents({
	'visible': function() {
		el1.setStyle('border', '4px solid #000');
	},
	'hidden': function() {
		el1.setStyle('border', 'none');
	}
});	
 
var el2 = $('el2');
el2.addEvents({
	'visible': function() {
		el2.setStyle('border', '4px solid #000');
	},
	'hidden': function() {
		el2.setStyle('border', 'none');
	}
});

Luego creamos una instancia de e24ScrollEvents pasándole como parámetro un objeto de opciones. Entre las opciones tenemos: el elemento contenedor (window si queremos que sea la página), el modo (vertical u horizontal) y un array con los elementos que se subscribirán a los eventos “visible” y “hidden”. Esto hará que se comience a monitorizar la visibilidad de los elementos subscritos.

1
2
3
4
5

new e24ScrollEvents({
	container: window,
	mode: 'vertical',
	elements: ['el1', 'el2']
});

Descripción de las opciones

• container: El id del elemento que tiene el scroll. Si es el scroll de la página debes poner window.
• mode: El scroll que deseamos controlar, los posibles valores son vertical u horizontal.
• elements: El array de elementos que se subscribirán a los eventos visible y hidden. Puede ayudar mucho utilizar los selectores de mootools ej. $$(’.myelements’).

Métodos

• listenScroll: Activa los eventos “visible” y “hidden” en los elementos visibles. Este método solo es necesario llamarlo si queremos chequear la visibilidad aunque no se haya movido el scroll, por ejemplo justo después de añadir los controladores de los eventos a los elementos.

Nuevos Eventos de Element

• visible: Se activa cuando el elemento aparecen el área visible. Recibe como parámetro el propio elemento y la posición del scroll.
• hidden: Se activa cuando el elemento desaparece del área visible. Recibe como parámetro el propio elemento y la posición del scroll.

Errores conocidos y cosas por hacer

• Controlar la visibilidad horizontal y verticalmente a la vez. A mi no me hizo falta para mi proyecto, pero podría ser útil.

Licencia
Distribuido bajo Licencia MIT

Descargar
e24ScrollEvents 1.0 (38.8 KB, incluye los demos)

Si quieres saber en qué trabajo ahora sígueme en twitter @aartiles24

Copyright 2009. AJAX24. Powered by equipo24

• Inicio
• Ajaxigg
• Acerca de
• Contacto