The Scroller Class

A demonstration of the basic usage of the scroller class. Move the mouse inside the element. 

var scroll1 = new Scroller('drag', {area: 150, velocity: 1});
var scroll2 = new Scroller('mousemove', {area: 100, velocity: 1});
 
// Drag
$('drag').addEvent('mousedown', function() {
	this.setStyle('cursor', 'url(/demos/Scroller/closedhand.cur), move');
	scroll1.start();
});
$('drag').addEvent('mouseup', function() {
	this.setStyle('cursor', 'url(/demos/Scroller/openhand.cur), move');
	scroll1.stop();
});
 
 
// Mousemove
$('mousemove').addEvent('mouseover', scroll2.start.bind(scroll2));
$('mousemove').addEvent('mouseout', scroll2.stop.bind(scroll2));
<h3>Drag (Mousedown, Mouseup)</h3>
<div id="drag">
	<div class="inside drag"></div>
</div>
 
<h3>Mousemove</h3>
<div id="mousemove">
	<div class="inside move"></div>
</div>
#mousemove, #drag {
	width: 500px;
	height: 300px;
	border: 1px solid #000;
	overflow: auto;
	margin: 0 auto;
}
 
#drag { 
	cursor: url(openhand.cur), move;
}
 
.inside {
	width: 2000px;
	height: 1000px;
}
 
.move {
	background: #eee url(pattern1.gif);
}
 
.drag {
	background: #333 url(pattern2.gif);
}

Drag (Mousedown, Mouseup)

Mousemove