Cross-Browser Fancy jQuery Custom Scrollbar Plugin - Skroller

Yet another jQuery plugin which allows you to create a cross-browser and fully customizable scrollbar in Html element.

Basic Usage:

1. Include jQuery javascript library and the jQuery skroller plugin in your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.skroller.js" type="text/javascript"></script>

2. Add an unique ID to your Html element that will be transformed into a scrollable area with a fancy custom scrollbar.

<div id="demo">

Your content goes here

</div>

3. Simply call the plugin on the Html element you just created. 

$('#demo').skroller();

4. Customize the scrollbar via JS options.

$('#SkrollThis').skroller({
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
});

Change log:

v1.0.1 (2014-07-01)

• Bug fixes

---

This awesome jQuery plugin is developed by tonymorello. For more Advanced Usages, please check the demo page or visit the official website.