Jquery custom scroll bar

Question

So I am trying to replicate browser scroll bar behavior with div's so far i'm getting nowhere, first let's look at my code, jsFiddle, and the actual code here:

(function( $ ) {
    $.widget( "ui.slider", $.ui.mouse,{

    _create: function() {
        this._mouseInit();
    },

    _mouseDrag: function(e) {
        mouseOffset = (e.offsetY / this.element.height()) * 100;
        handleOffset = (e.target.offsetTop / this.element.height()) * 100;

        $(".handle").css("top", (mouseOffset - handleOffset) + "%");        
    }

    });

}( jQuery ) );

So as you can see I'm using jquery widget to capture mouse events, and as you can see with current code it's going crazy in jsFiddle, what i want to achieve is that wherever you click on scroll the bar and start dragging that bar would go along with the mouse and not jump down or up or to the middle and so on, basically it should work same way it works in browser, any help would be appreciated.

Answer 1

Just out of curiosity, implementing a scroll bar takes a lot more effort than just handling the scrolling of content.

Would a scrollbar plugin for jQuery be more useful to you?

Answer 2

Here a good scroll bar that works well with the DIV tag. You can customize any way you want it, include your own graphics and colors, sizes and all. It worked for me, but it has a cost.

Check it our at: www.sa-wired.com/scrollbar/plugins.php

Good luck.

Answer 3

This one also works pretty well:

https://github.com/mzubala/jquery-custom-scrollbar

and is very simple to install.