jQuery scrolling using a draggable div

I'm making a jQuery plugin that creates a scrollable div. You are able to scroll up and down using a div on the right hand side. The problem is that my draggable div seems to be quite juddery when moving it.

A full example of what I'm trying is here: http://jsfiddle.net/j8Hqq/1/

I think the offending code will be in here:

.mousemove(function(e) {
    if(being_dragged) {
        scroller_y = e.pageY - $(this).offset().top;

        if(scroller_y < 0)
            scroller_y = 0;
        else if(scroller_y > $this.height() - $(this).height())
            scroller_y = $this.height() - $(this).height();
    }

    $(this).css({
        top: scroller_y
    });

    $('#custom-scroll-children').scrollTop(scroller_y);
});

I was thinking abou开发者_JS百科t implementing jQuery-ui.draggable into it, but didn't want a large library attached to the plugin.

Thanks,

$(this).offset().top; in mousemove receives wildy differing values, which is why it is as jerky as it is. I got smoother results by putting topOffset = $(this).offset().top; into the mousedown function, then using scroller_y = e.pageY - topOffset; in mousemove.

There are still issues (scrolling stops when the mouse leaves the scroll area, quick mouse movements will stop the scrolling) though.

Have you looked at http://jscrollpane.kelvinluck.com/ ? It's a jQuery plugin that pretty much does what you ae trying to achieve here.

.css function make the draggable div juddery, you can try function "animate".