jQuery.scrollpanel

a simple vertical scrollpanel

Advertisement
0.1

jQuery.scrollpanel replaces the native vertical browser scrollbar with a CSS-stylable custom scrollbar.

This script is used in h5ai in the tree sidebar and the language selection menu. The sources and a changelog are available on GitHub.

Examples

Usage

To convert a container element, for example a <div> tag, into a scrollpanel use:

$(selector).scrollpanel();

Assuming the container has a structur like this:

<div id="mycontainer">
	Some text content.
	<span class="bar"/>
	<div class="foo"/>
</div>

it will internally be transformed into that:

<div id="mycontainer">
	<div class="sp-viewport">
		<div class="sp-container">
			Some text content.
			<span class="bar"/>
			<div class="foo"/>
		</div>
	</div>
	<div class="sp-scrollbar">
		<div class="sp-thumb" />
	</div>
</div>

Configuration

The only option that can be passed to the contructor is a class prefix which defaults to 'sp-'.

$(selector).scrollpanel({
	prefix: 'sp-'
});

Styles can freely be applied:

#mycontainer {
	width: 140px;
	height: 200px;
	border: 1px solid #ccc;
 
	.sp-scrollbar {
		width: 10px;
		margin: 4px;
		background-color: #ccc;
		cursor: pointer;
 
		.sp-thumb {
			background-color: #aaa;
		}
	}
	.sp-scrollbar.active
		.sp-thumb {
			background-color: #999;
		}
	}
}

License

jQuery.scrollpanel is provided under the terms of the MIT License.