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
- Scroller requires the page to be in Standards Mode.
Syntax
new Scroller(element[, options]);
Implements
Arguments
- element - (element) The element to scroll.
- 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
- x - (number) Current x-mouse position.
- y - (number) Current y-mouse position.
Examples
var myScroller = new Scroller(window, {
area: Math.round(window.getWidth() / 5)
});
(function(){
this.stop();
this.start();
}).periodical(1000, myScroller);
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.