Scroller

Scroller is a JavaScript component that depends on Prototype.js, designed to make it easier for designers to set up an area on a web page that scrolls.

Here's how it works

First, set up a scroll area as shown below. You don't have to use those exact ids and class names, as you can specify what is what in the options, but those are the defaults.

<div id="scroll_area">
	<div id="scroll_container">
		<div class="scroll_pane" id="pane1">
			Hello
			<div class="scroll_next"></div>
		</div>
		<div class="scroll_pane" id="pane2">
			<div class="scroll_previous"></div>
			Goodbye
		</div>
	</div>
</div>
	

Then create a new Scroller object to handle that scrolling area

new Scroller({
	scrollArea:'scroll_area',
	scrollPaneClass:'scroll_pane'
});

The combination of the two will produce this:

You can also create areas that scroll vertically, and use "handles" (1,2,3, etc.) to select which item to scroll to.

Download Scroller.js

Options

Name	Default	Permitted	Description
direction	'vertical'	'vertical' 'horizontal'
scrollArea	'scroll_area'	string id value	id of the area to scan for divs with the specified 'scrollPane' class
scrollPaneClass	'scroll_pane'	string id value	class of the divs that will act as scroll panes
scrollPreviousClass	'scroll_previous'	string class value	div which acts as a handle for scrolling to previous pane
scrollNextClass	'scroll_next'	string class value	div which acts as a handle for scrolling to next pane
keepScrolling	false	boolean	if true, automatically scrolls to next pane after scrollPause interval
scrollPause	3000	integer value	interval (in milliseconds) after which to automatically scroll to next pane, if keepScrolling is true.
cyclePanes	false	boolean	if true, allows automatic scrolling to return to first pane and continue scrolling.
numberOfCycles	0	integer value	number of times to automatically cycle through all panes, if keepScrolling and cyclePanes are true.
handleContainer		string id value	id of container within which to create handles. Handles are only created if this value is non-null
handleClass	'handle'	string class value	class of handles
handleDirection	'left'	'left' 'right'	if set to 'right', handles float to the right
handleColor		'light' 'dark'	controls what color the handles overlaying the scroll areas are.
handleImage		string url value	source of the image which will act as the handle
onScrollBegin		function reference	function to be executed when a scrolling event begins
onScroll		function reference	function to be executed during a scrolling event
onScrollEnd		function reference	function to be executed when a scrolling event concludes
duration	20	integer value	interval (in milliseconds) between scrolling steps. Smaller number means more steps.