Cross-Browser Fancy jQuery Custom Scrollbar Plugin - Skroller
File Size: | 62.9 KB |
---|---|
Views Total: | 1181 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.