javascript - jQuery 在鼠标按下时平滑滚动

Question

有什么方法可以使用 jquery animate 模拟滚动类型选项吗？现在它只是简单地滚动等于你给它的值(如下所示)。我不能在这个 div 上做一个自定义滚动条，因为它主要是为了让它在移动设备上更容易滚动。因此，下面的示例将滚动购买它从顶部开始 -100px，然后停止并重复。有什么简单的方法可以使这种转变继续下去。

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 1

jsFiddle showing it in action

最简单的答案是您要确保将动画设置为将 easing 设置为 linear。

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

奇怪的是，当 animate() 中没有缓动时，它的默认值实际上不是线性的(这基本上将其关闭)。默认设置是标准缓动，它消除了“平滑度”，我们在这里想要的整个动画的速度。

这是一个示例，您可以看到:

var end = 20;

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