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?