ScrollSpy
ScrollSpy is a small but powerful MooTools plugin that allows you to listen to scrolling within any DOM element and execute functions based upon the element's scroll position.
MooTools Javascript Class
/*
---
description: ScrollSpy
authors:
- David Walsh (http://davidwalsh.name)
license:
- MIT-style license
requires:
core/1.2.1: '*'
provides:
- ScrollSpy
...
*/
var ScrollSpy = new Class({
/* implements */
Implements: [Options,Events],
/* options */
options: {
min: 0,
mode: 'vertical',
max: 0,
container: window,
onEnter: $empty,
onLeave: $empty,
onTick: $empty
},
/* initialization */
initialize: function(options) {
/* set options */
this.setOptions(options);
this.container = document.id(this.options.container);
this.enters = this.leaves = 0;
this.max = this.options.max;
/* fix max */
if(this.max == 0) {
var ss = this.container.getScrollSize();
this.max = this.options.mode == 'vertical' ? ss.y : ss.x;
}
/* make it happen */
this.addListener();
},
/* a method that does whatever you want */
addListener: function() {
/* state trackers */
this.inside = false;
this.container.addEvent('scroll',function() {
/* if it has reached the level */
var position = this.container.getScroll();
var xy = this.options.mode == 'vertical' ? position.y : position.x;
/* if we reach the minimum and are still below the max... */
if(xy >= this.options.min && xy <= this.max) {
/* trigger Enter event if necessary */
if(!this.inside) {
/* record as inside */
this.inside = true;
this.enters++;
/* fire enter event */
this.fireEvent('enter',[position,this.enters]);
}
/* trigger the "tick", always */
this.fireEvent('tick',[position,this.inside,this.enters,this.leaves]);
}
else {
/* trigger leave */
if(this.inside) {
this.inside = false;
this.leaves++;
this.fireEvent('leave',[position,this.leaves]);
}
}
}.bind(this));
}
});Class: ScrollSpy
Implements:
Options, Events
ScrollSpy Method: constructor
Notes:
- ScrollSpy debuted Wednesday, May 27, 2009 on the David Walsh Blog: http://davidwalsh.name/scrollspy
- ScrollSpy requires MooTools Core only -- no MooTools More dependencies.
- Visit http://davidwalsh.name/scrollspy for example usages.
Syntax:
var myScrollSpy = new ScrollSpy(options);
Arguments:
- options - (object, optional) Initial options for the class.
Options:
- min - (integer, defaults to 0) The minimum value of the X or Y coordinate, depending on mode.
- mode - (string, defaults to 'vertical') Defines whether to listen to X or Y scrolling.
- max - (integer, defaults to 0) The maximum value of the X or Y coordinate, depending on mode.
- container - (element, defaults to window) The element whose scrolling to listen to.
Returns:
- (object) A new ScrollSpy instance.
Events:
enter
- (function) Function to execute when the element's designated area is scrolled into.
Signature
onEnter(position, enters)
Arguments:
- position - (object) The container's scroll position object.
- enters - (integer) The number of times the scroll area has been entered.
leave
- (function) Function to execute when the element's designated area is scrolled out of.
Signature
onLeave(position, enters)
Arguments:
- position - (object) The container's scroll position object.
- enters - (integer) The number of times the scroll area has been left.
tick
- (function) Function to execute on each scroll event when the scroll position is between the enter and exit.
Signature
onTick(position, inside, enters, leave)
Arguments:
- position - (object) The container's scroll position object.
- inside - (boolean) Represents whether or not the scroll is within the designated min and max area.
- enters - (integer) The number of enters.
- leaves - (integer) The number of leaves.