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.