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.

Note

Syntax

new Scroller(element[, options]);

Implements

Events, Options

Arguments

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

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.

Events

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

Signature

onChange(x, y);

Arguments

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

Examples

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.

Syntax

myScroller.start();

Examples

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

The scroller stops listening to mouse movements.

Syntax

myScroller.stop();

Examples

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

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