Skroller

Skroller.js is a jQuery plugin that transforms elements such as div's into scrollable areas with customizable scrollbars that are consistent across different browsers

How it works

Simple, just call skroller() method on the jQuery selector and you are pretty much done... Relatively straightforward right?

A little visual example...

<div id="myDiv">
  Div content in here...
</div>

<script>
  $('#myDiv').skroller();
</script>

And this is the result

Easy enough, right?

Now some eye candy!

Skroller has a few options that can be passed when the method is called here is a list with their defaults

Option	Default	Description
height	200	Defines the fixed height of the rendered scrollable element in pixels
maxHeight	false	If set to a number will wrap the scrollable element around the target and expand untill the height in pixel is reached then start scrolling
barWidth	10	The scrollbar width in pixel
barColor	#2C96DE	The color of the scrollbar
barOpacity	1	The bar opacity from 0 to 1
barMinHeight	20	The minimum height of the scrollbar
barMaxHeight	=height	The maximum height of the scrollbar
barHide	false	Setting this to true will hide the bar and show it when the mouse is over the scrollable element
barHideDelay	0.5	Value in seconds before the scrollbar fades away when the mouse leaves the scrollable element
railOff	false	Setting this to true will NOT render the rail, just the scrollbar
railHide	=barHide	Inherit the value of barHide but can be changed to customize the rail behavior separately
railColor	=barColor	Set custom color for the rail
railOpacity	=barOpacity/5	Customize the rail opacity from 0 to 1
indent	=barWidth+(barWidth/2)	The distance between the content and the scrollbar
padding	0	the distance between the content and the frame
style	'smooth'	Can be 'round', 'smooth', 'square' or a numeric value that defines the roundness of the scrollbar corners
frameClass	'skroller'	Defines a custom class for the scrollable element to offer more customization options
wheelSpeed	1	the number of lines to be scrolled at one time

Here is how it looks...

And the code...

$('#myDiv').skroller({
	height : 230,
	barWidth : 10,
	barColor : '#db0456',
	barOpacity : 0.8,
	barMinHeight : 40,
	barHideDelay : 1,
	railColor : '#000',
	railOpacity : 0.3,
	style : 'round'
});

Another example...

And how to achieve it...

<script>
$('#myDiv').skroller({
	height : 230,
	barWidth : 10,
	barColor : '#77c61b',
	barOpacity : 0.6,
	barMinHeight : 40,
	railOff : true,
	style : 'round',
	indent : 0
});
</script>

That's it, very simple.

Demo

Here is a working DEMO

A note...

Skroller is still a work-in-progress so there might be bugs, compatibility issues and it might pose a threat to your pets... I mainly developed it for personal use on my projects but I like sharing (because it's caring) and I will try and keep it updated... feel free to fork it of course and report any issues you may find.

Also forgive me if my code is not clean / canonical / rational / standardized etc... (you get the point) I am a web designer, self-taught web developer who likes to hack code, so you've been warned! :)