This is a jquery plug for decorate the browser's default scrollbar
Download the plug, unzip it and copy the files to your application directory and load them inside your HTML.
The jquery.decorateScrollBar.js and jquery.decorateScrollBar.css files are necessary. And the HTML structure must like below:
<div id="wrapper">
<div class="content">
<p>some context... some context...some context... some context</p>
<p>some context... some context...</p>
<p>some context... some context...</p>
<p>some context... some context...</p>
<p>some context... some context...</p>
<p>some context... some context...</p>
<p>some context... some context...</p>
<p>some context... some context...</p>
<p>some context... some context...</p>
<p>some context... some context...</p>
<p>some context... some context...</p>
<p>some context... some context...</p>
</div>
</div>
Note: The "content" element has scrollbar really. Generally, it has "width", "height" and "overflow" css properties. And the "wrapper" element is necessary to wrap the "content" element, which must has no "padding" css properties. And the "wrapper" element must have a "position" css properties, if you don't assign, it will be "relative".
Sample Example
$('#wrapper').decorateScrollBar();
You can also extend the default options:
$('#wrapper').decorateScrollBar({
showClickButton: true,
clickMoveSpace: 20,
mouseWheelSpeed: 40
});
You can pass these options as key/value object during activation to alter the default behaviour.
- Type:
string - Default: ``
The "content" elements's id.
- Type:
string - Default: ``
The "content" elements's class name.
- Type:
string - Default:
scrollbar-y-rail
The scrollbar Y Rail class name.
- Type:
string - Default:
scrollbar-y
The scrollbar Y class name.
- Type:
string - Default:
scrollbar-y-up-click
The scrollbar Y UpClick class name.
- Type:
string - Default:
scrollbar-y-down-click
The scrollbar Y DownClick class name.
- Type:
string - Default:
scrollbar-x-rail
The scrollbar X Rail class name.
- Type:
string - Default:
scrollbar-x
The scrollbar X class name.
- Type:
string - Default:
scrollbar-x-left-click
The scrollbar X LeftClick class name.
- Type:
string - Default:
scrollbar-x-right-click
The scrollbar X RightClick class name.
- Type:
integer - Default:
12
The scrollbar Y Rail width.
- Type:
integer - Default:
12
The scrollbar X Rail height.
- Type:
integer - Default:
30
The move space when click button.
- Type:
integer - Default:
50
The mouse wheel speed.
- Type:
integer - Default:
2
The move space will be clickMoveSpace * railClickMoveCoefficient when click rail.
- Type:
boolean - Default:
false
determine whether the click button will be show.
Manually update the scrollbar. For example, when the size of "content" change.
Usage:
$('#wrapper').decorateScrollBar('update');
Manually remove all click event, relative dom, and delete the jquery cache.
Usage:
$('#wrapper').decorateScrollBar('destory');
Copyright 2013 AAXIS, Inc
