Question

I’m using the following code to scroll a layer according to mouse position:

$(".icons").animate({scrollTo:x},duration);

It works find however, I’m finding that the scroll speed is much faster when going to the right. Also noticed that if the scroller starts on the left and scroll to the right just a little bit and then scroll back tot he right again it’s really really slow. I’m assuming that the actuall scroll speed isn’t best controlled using the duration argument but I’m not sure how else to control the speed. I would like to have a consistent speed regardless of where the scroll bar is.

Any pointers?

Thanks

Answer 1

The problem is that’s a duration, not a speed you’re passing, so you need to base the duration on the distance you need to move, like this:

$(".icons").each(function() {
  var duration = Math.abs($(this).scrollLeft() - x) * 2; //2ms per pixel moved
  $(this).animate({scrollLeft: x}, duration);
});

You can adjust that constant as needed, but that’s the basic premise, get the distance you need to move (the absolute value) and multiply that number of pixels times some constant if needed, that’s milliseconds per-pixel.