0

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 about implementing jQuery-ui.draggable into it, but didn't want a large library attached to the plugin.

Thanks,

Improve this question
1

2 Answers 2

Reset to default
1

$(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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for your help, I was able to make it smoother by doing this. I'll carry on doing what I'm doing, but thanks for pointing out jScrollPane (and @Andy), I know I have something to fall back on if I fail!
0

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.