I have never been a fan of custom scroll bars.  Most of the time they are just eye candy and end up getting in the way.  That was until I saw the scroll bar in Google Wave.  I thought it was the best UI feature in the whole app.  It added functionality and style making much better than the browser default scroll bar.  So I thought that I would create a scroll bar like it as a jQuery UI widget.

• view a demo
• Git Hub repo

If you're going to support Internet Explorer and care about eye candy, plan on creating your own background images.  I'm using css3 background gradients to do all of the fancy background stuff .

Getting Started

Step 1

Include the following files on your page

• jQuery 1.4.2
• jQuery UI 1.8.4 - widget factory and draggable
• jquery.jb.shortscroll.css
• jquery.jb.shortscroll.js
• mousewheel.js - thanks to Brandon Aaron for this great plugin

Step 2

Create an html element with a specified width and height, add some content to it

jquery is great and im going to tell you about it......... 
 

Next, just Initiate the widget.

//really simple
$('#content').shortscroll();
//setting your own values for the parameters
$('#content').shortscroll({
scrollSpeed:200	
});

Options

Events

There is a special event that gets triggered when the scrollHeight is changed on the target. Just bind to the event named jbShortscrollUpdateMarker to add customization