ScrollSide

When you've included ScrollSide into your site, your user can use the mouse wheel to scroll up to go left and down to move right.

Plugin Code (Version 1.0)

var ScrollSide = new Class({
	
	//implements
	Implements: [Options,Events],
	
	//options
	options: {
		reset: true,
		movement: 75 /*,
		onScrollUp: $empty,
		onScrollDown: $empty
		*/
	},
	
	//initialization
	initialize: function(container,options) {
		//set options
		this.setOptions(options);
		this.container = $(container);
		if(this.options.reset) { this.container.scrollTo(0,0); }
		this.containerWidth = this.container.getScrollSize().x;
		this.position = this.container.getScroll().x;
		//add the listener
		this.addListeners();
	},
	
	//listen for scrolling
	addListeners: function() {
		/* scroll reset */
		var scrollContainer = (this.container == $(document.body) ? window : this.container);
		scrollContainer.addEvent('scroll',function() {
			this.position = this.container.getScroll().x;
		}.bind(this));
		/* mousewheeling */
		this.container.addEvent('mousewheel',function(event) {
			event.stop();
			//scroll down/right
			if(event.wheel < 0) {
				this.fireEvent('onScrollUp',[event]);
				var pos = this.position + this.options.movement;
				this.position = (pos <= this.containerWidth ? pos : this.containerWidth);
			}
			//scroll up/left
			else{
				this.fireEvent('onScrollDown',[event]);
				var pos = this.position - this.options.movement;
				this.position = (pos > 0 ? pos : 0);
			}
			this.container.scrollTo(this.position,0);
		}.bind(this));
	}
});

/* usage */
window.addEvent('domready',function() {
	var ss = new ScrollSide($(document.body));
});

Options and Events

• reset: (defaults to true) Sets the container to the {x:0,y:0} position on instantiation.
• movement: (defaults to 75) The number of pixels to scroll on each wheel movement.

Events for ScrollSide include:

• onScrollUp: Fires when the user scrolls their mouse wheel up.
• onScrollDown: Fires when the user scrolls their mouse wheel down.

Code Revisions & Bug Fixes

None.