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:

• 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);  

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

1var 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)  

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

1onEnter(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)  

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

1onLeave(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)  

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

1onTick(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.

-->

via davidwalsh.name

Posted via web from brandontruong's posterous