This is a tiny class that adds scrolling capabilities with just a mouse wheel to any element in MooTools. Could not use the Slider class as I wanted it to be really lightweight, rather flyweight. Just remember, there are no bars - only content that can be scrolled with a mousewheel.

To use, pass in an Element and an options object. The options object only takes one parameter “direction” which may be “horizontal” or “vertical”. The default value is vertical.

var scrollable = new Scrollable($("#content"));

And the actual class.

/*
 * Makes any Element scrollable. The element needs to have the overflow property as "auto".
 * This is a lightweight class, and does not require any libraries other than Core.
 *
 * To use, create a new Object of Scrollable, and pass in an Element.
 * var scrollable = new Scrollable($('div'));
 *
 * @Author Anurag Mishra
 * @Date Jan 13, 2010
 *
 */
var Scrollable = new Class({
	Implements: Options,
	options: {
		direction: "vertical"
	},
	/*
	 * @param content Element the element that is to be made scrollable.
	 * @param options Options optional hash to indicate direction of scroll. Possible
	 * values are "horizontal" or "vertical". The default value is "vertical".
	 */
	initialize: function(content, options) {
		this.setOptions(options);
		this.content = content;
		this.content.addEvent("mousewheel", this.onScroll.bind(this));
	},
	pickValue: function(horizontal, vertical) {
		return this.isVerticalScroll() ? vertical : horizontal;
	},
	onScroll: function(event) {
		var stepSize = this.getScroll() - event.wheel;
		if(this.isVerticalScroll()) {
			this.content.scrollTo(0, stepSize);
		}
		else {
			this.content.scrollTo(stepSize, 0);
		}
	},
	getContent: function() {
		return this.content;
	},
	getScroll: function() {
		return this.pickValue(this.content.getScroll().x, this.content.getScroll().y);
	},
	isVerticalScroll: function() {
		return this.options.direction == "vertical";
	},
	isHorizontalScroll: function() {
		return !this.isVertical();
	}
});