Control.ScrollBar

Introduction

Why emulate a native UI component? Primarily, the inconsistent cross browser behavior of native scrollbars. Firefox for instance considers scrollbars to be entirely outside the layout of a document. If a Draggable element goes over a native scrollbar in this case, the mouse has left the page, disrupting the drag operation. Rewriting the scrollbar in the DOM solves this problem. Fringe benefits include granular control over the behavior and style as well as richer API.

This scrollbar implementation includes mouse wheel support, a proportionally drawn handle, and can accommodate dynamic content and layout changes with the recalculateLayout() method.

Insert Paragraph and recalculateLayout()

HTML

Control.ScrollBar requires a very particular HTML structure. There must be a positioned outer container, with the track and scrollable container as direct children. The track must contain a single div (with any id or class name). You do not reference the outer container or handle when calling initialize(), only the scrollable content, and the track. The scrollable content must have it's overflow property set to hidden.

		<div id="scrollbar_container">
			<div id="scrollbar_track"><div id="scrollbar_handle"></div></div>
			<div id="scrollbar_content">...</div>
		</div>
	

JavaScript

	var scrollbar = new Control.ScrollBar('scrollbar_content','scrollbar_track');
	
	$('scroll_down_50').observe('click',function(event){
		scrollbar.scrollBy(-50);
		event.stop();
	});
	
	$('scroll_up_50').observe('click',function(event){
		scrollbar.scrollBy(50);
		event.stop();
	});
	
	$('scroll_top').observe('click',function(event){
		scrollbar.scrollTo('top');
		event.stop();
	});
	
	$('scroll_bottom').observe('click',function(event){
		//to animate a scroll operation you can pass true
		//or a callback that will be called when scrolling is complete
		scrollbar.scrollTo('bottom',function(){
			if(typeof(console) != "undefined")
				console.log('Finished scrolling to bottom.');
		});
		event.stop();
	});
	
	$('scroll_second').observe('click',function(event){
		//you can pass a number or element to scroll to
		//if you pass an element, it will be centered, unless it is
		//near the bottom of the container
		scrollbar.scrollTo($('second_subhead'));
		event.stop();
	});
	
	$('scroll_third').observe('click',function(event){
		//passing true will animate the scroll
		scrollbar.scrollTo($('third_subhead'),true);
		event.stop();
	});
	
	$('scroll_insert').observe('click',function(event){
		$('scrollbar_content').insert('
Inserted: ' + $('repeat').innerHTML + '
');
		//you only need to call this if ajax or dom operations modify the layout
		//this is automatically called when the window resizes
		scrollbar.recalculateLayout();
		event.stop();
	});

CSS

#scrollbar_container {
	position:relative;
	width:500px;
}

#scrollbar_track {
	position:absolute;
	top:0;
	right:0;
	height:100%;
	width:10px;
	background-color:transparent;
	cursor:move;
}

#scrollbar_handle {
	width:10px;
	background-color:#5c92e7;
	cursor:move;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	opacity:0.9;
    -moz-opacity:0.9;
}

#scrollbar_content {
	overflow:hidden;
	width:485px;
	height:250px;
}

Instance

Return	Name	Description
Control.ScrollBar	initialize(Element container, Element track [,Hash options])	Automatically calls recalculateLayout(). The handle will be obtained via track.firstDescendant()
null	destroy()
null	disable()
null	enable()
null	recalculateLayout()	Call this if the page layout changes from dynamic content. Recalculates track length, handle length and wether or not the scrollbar should be hidden or visible.
null	reset()
null	scrollBy(number y)	y can be a positive or negative integer.
null	scrollTo(mixed y [,mixed animate])	y can be an Element, a number (offsetTop), or the string 'top' or 'bottom'. animate (smooth scrolling) can be a boolean, or can be a callback to execute when the scroll is complete. If a callback is passed the it is always called, even if scrolling is not necessary.
Element	container
Element	handle
Element	track

Options

Type	Name	Default	Description
string	active_class_name	'scrolling'
Element	apply_active_class_name_to	this.container
number	handle_minimum_height	25	If proportional is true, this is the minimum height in pixels.
number	notification_timeout_length	125	Milliseconds between change() events when scrolling.
bool	proportional	true	Draw the handle proportional to (container height / length of track).
number	scroll_to_smoothing	0.01
number	scroll_to_steps	15
Hash	slider_options	{}	Will be passed to Control.Slider

Events

Name	Description
change(number delta)	Forwarded from slider.onSlide and slider.onChange, but will fire at a maximum interval of options.notification_timeout_length for performance.
disabled()
enabled()