JS Tutorial
Download
Demo
- Overview
- Documents
User Rating: 0/5 ( 0 votes)
Your Rating:
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
Source: morellowebdesign.com
1. INCLUDE JS FILES
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="../jquery.skroller.js" type="text/javascript"></script>
2. HTML
<div id="SkrollThis" style="width:450px;" align="justify" > <img src="milo.jpg" width="200" style="float:left; margin:5px;"/> Furtum certe punit lex tua, domine, et lex scripta in cordibus hominum, quam ne ipsa quidem delet iniquitas... </div>
3. JAVASCRIPT
$(document).ready(function(e) {
$('#SkrollThis').skroller();
});
4. OPTIONS
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 |
