ScrollSpy | David Walsh Blog


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));  	}  });
Click here to copy this code to the clipboardClick here to add this snippet to CodaClick here to add this snippet to TextMateGet the raw code

1/*
2
3description: ScrollSpy
4
5authors:
6 – David Walsh (http://davidwalsh.name)
7
8license:
9 – MIT-style license
10
11requires:
12 core/1.2.1: ‘*’
13
14provides:
15 – ScrollSpy
16
17*/
18var ScrollSpy = new Class({
19
20 /* implements */
21 Implements: [Options,Events],
22
23 /* options */
24 options: {
25 min: 0,
26 mode: ‘vertical’,
27 max: 0,
28 container: window,
29 onEnter: $empty,
30 onLeave: $empty,
31 onTick: $empty
32 },
33
34 /* initialization */
35 initialize: function(options) {
36 /* set options */
37 this.setOptions(options);
38 this.container = document.id(this.options.container);
39 this.enters = this.leaves = 0;
40 this.max = this.options.max;
41
42 /* fix max */
43 if(this.max == 0) {
44 var ss = this.container.getScrollSize();
45 this.max = this.options.mode == ‘vertical’ ? ss.y : ss.x;
46 }
47 /* make it happen */
48 this.addListener();
49 },
50
51 /* a method that does whatever you want */
52 addListener: function() {
53 /* state trackers */
54 this.inside = false;
55 this.container.addEvent(‘scroll’,function() {
56 /* if it has reached the level */
57 var position = this.container.getScroll();
58 var xy = this.options.mode == ‘vertical’ ? position.y : position.x;
59 /* if we reach the minimum and are still below the max… */
60 if(xy >= this.options.min && xy <= this.max) {
61 /* trigger Enter event if necessary */
62 if(!this.inside) {
63 /* record as inside */
64 this.inside = true;
65 this.enters++;
66 /* fire enter event */
67 this.fireEvent(‘enter’,[position,this.enters]);
68 }
69 /* trigger the “tick”, always */
70 this.fireEvent(‘tick’,[position,this.inside,this.enters,this.leaves]);
71 }
72 else {
73 /* trigger leave */
74 if(this.inside) {
75 this.inside = false;
76 this.leaves++;
77 this.fireEvent(‘leave’,[position,this.leaves]);
78 }
79 }
80 }.bind(this));
81 }
82});

Class: ScrollSpy

Implements:

Options, Events

ScrollSpy Method: constructor

Notes:

Syntax:

var myScrollSpy = new ScrollSpy(options);  

Arguments:

  1. 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:

  1. position – (object) The container’s scroll position object.
  2. 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:

  1. position – (object) The container’s scroll position object.
  2. 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:

  1. position – (object) The container’s scroll position object.
  2. inside – (boolean) Represents whether or not the scroll is within the designated min and max area.
  3. enters – (integer) The number of enters.
  4. leaves – (integer) The number of leaves.

–>

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s