chadpeppers chadpeppers - 15 days ago 11
Javascript Question

jQuery smooth scroll on mousedown

Is there any way to emulate a scroll type option using jquery animate? Right now it simply scrolls equivalent to the value you give it (like below). I cannot do a custom scroll bar on this div because its mainly geared towards making it easy to scroll on mobile devices. So the example below will scroll buy it goes -100px from the top, but then stops, and repeats. Is there any easy way to make this a transition that it will just continue.

jQuery(".down-arrow").mousedown(function(){
var height = jQuery("#technology_list").height();
//if($('#technology_list').offset().top
scrolling = true;
startScrolling(jQuery("#technology_list"), "-=100px");
//jQuery("#technology_list").animate({top: '-=25'});
}).mouseup(function(){
scrolling = false;
});

function startScrolling(obj, param)
{
obj.animate({"top": param}, "fast", function(){
if (scrolling)
{
startScrolling(obj, param);
}
});

Answer

jsFiddle showing it in action

Simplest answer would be that you want to make sure you set your animate to have easing set to linear.

.animate( { /* whats animating */ } , duration: 'XXX', easing: 'linear'
   ,function () { /* callback */ } 
);

Strangely enough, when easing is left out of animate() its default actually isn't linear (which basically turns it off). The default is a standard easing, which eliminates that "smoothness", one speed through out the entire animation that we'd want here.

Here's an example so you can see it:

var end = 20;

for (i = 0; i < end; i++) {
  $('#test').animate({'top': '+=50px'}, 500, 'linear', function () {
      // callback
  });
}

‚Äč