The Scroller is a Class to scroll any element with an overflow (including the window) when the mouse cursor reaches certain boundaries of that element.

You must call its start method to start listening to mouse movements.

• Scroller requires the page to be in Standards Mode.

new Scroller(element[, options]);

Events, Options

1. element - (mixed) The element to scroll, or it's id.
2. options - (object, optional) An object for the Scroller instance's options.

• area - (number or object: defaults to 20) The necessary boundaries to make the element scroll. Can either be a number or an object with top and bottom values. When passed a number, both the top and bottom are equal.
• velocity - (number: defaults to 1) The modifier for the window scrolling speed.
• fps - (number: defaults to 50) The frames per second that the scroller updates and scrolls.

• change - (function) When the mouse reaches some boundaries, you can choose to alter some other values, instead of the scrolling offsets.

onChange(x, y);

1. x - (number) Current x-mouse position.
2. y - (number) Current y-mouse position.

new Element('div', {
    styles: {
        width: 600,
        height: 400
    }
}).inject(new Element('div', {
    id: 'myScroll',
    styles: {
        width: 300,
        height: 200,
        overflow: 'scroll'
    }
}).inject($(document.body)))


var myScroller = new Scroller('myScroll', {
    area: Math.round(window.getWidth() / 10)
});
myScroller.start();

The scroller starts listening to mouse movements.

myScroller.start();

var myScroller = new Scroller('myElement');
myScroller.start();

The scroller stops listening to mouse movements.

myScroller.stop();

var myElement = $('myElement');
var myScroller = new Scroller(myElement);
myScroller.start();

myElement.addEvent('click', myScroller.stop.bind(myScroller)); //stop scrolling when the user clicks.