The Scroller Class
A demonstration of the basic usage of the scroller class. Move the mouse inside the element.
docs referencesjs code | html code | css code
References to Documentation
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); }