jQuery在mousedown上的平滑滚动

Question

有没有什么方法可以模仿使用jquery动画的滚动类型选项？现在它只是滚动相当于你给它的价值（如下）。我不能在这个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被animate（）忽略时，它的默认实际上不是线性的（基本上它是关闭的）。默认值是一个标准缓动，它消除了“平滑”，一个速度贯穿我们希望在这里的整个动画。

下面是一个例子，所以你可以看到它：

var end = 20; 

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

Answer 2

，你可以尝试使用jQuery插件ScrollTo：http://demos.flesler.com/jquery/scrollTo/

Answer 3

我前一阵有同样的问题，并把这个在一起，基本上它是一个无限滚动的解决方案：

编辑：这是我的代码，适合您的用例：

// Assuming you also have/want a scroll up 
jQuery(".up-arrow").mousedown(function() { 
    // You don't need to use jQuery instead of $ inside of jQuery defined functions 
    var offset = $("#technology_list").offset(); 
    var topValue = offset.top; 
    if ((topValue * 2) < 1000) speed = topValue * 3; 
    else if ((topValue * 2) < 500) speed = topValue * 4; 
    else if ((topValue * 2) < 100) speed = topValue * 8; 
    else speed = topValue * 2; 

    $("#technology_list").animate({ 
     top: 0 
    }, speed); 

}).mouseup(function() { 
    $("#technology_list").stop(); 
}); 

jQuery(".down-arrow").mousedown(function() { 
    var offset = $("#technology_list").offset(); 
    var topValue = offset.top; 
    var height = $("#technology_list").height(); 
    if (((height - topValue) * 2) < 1000) speed = (height - topValue) * 2; 
    else if (((height - topValue) * 2) < 500) speed = (height - topValue) * 2; 
    else if (((height - topValue) * 2) < 100) speed = (height - topValue) * 2; 
    else speed = (height - topValue) * 2; 

    $("#technology_list").animate(function() { 
     top: $("#technology_list").height() 
    }, speed); 


}).mouseup(function() { 
    $("#technology_list").stop(); 
});​ 

编辑结束。

$(".scroll-left").hover(function() { 

    if (($(this).parent().scrollLeft() * 2) < 1000) speed = $(this).parent().scrollLeft() * 3; 
    // If it is less than 500 pixels from the edge, then it takes 3 times as long as the scrollLeft value in milliseconds. (Sorry about the if's being hard to read) 

    else if (($(this).parent().scrollLeft() * 2) < 500) speed = $(this).parent().scrollLeft() * 4; 
    // And if it is less than 250 pixels, it takes 4 times as long 

    else if (($(this).parent().scrollLeft() * 2) < 100) speed = $(this).parent().scrollLeft() * 8; 
    // Less than 50, it takes 8 times as long 

    else speed = $(this).parent().scrollLeft() * 2; 
    // And if it is more than 500 run it at 2 milliseconds per pixel 

    $(this).parent().animate({ 
     scrollLeft: 0 
    }, speed); 
    // Scroll it to the beginning at the above set speed 
}, function() { 
    $(this).parent().stop(); 
    // On mouseOut stop the animation 
}); 

$(".scroll-right").hover(function() { 
    parent = $(this).parent()[0]; 
    parentWidth = $(this).parent()[0].scrollWidth; 
    // Cache parent and parentWidth (stops delay on hover) 

    if (((parentWidth - parent.scrollLeft) * 2) < 1000) speed = (parentWidth - parent.scrollLeft) * 2; 
    // Pretty much the same thing as before but this time it sort of makes a "scrollRight" 

    else if (((parentWidth - parent.scrollLeft) * 2) < 500) speed = (parentWidth - parent.scrollLeft) * 2; 

    else if (((parentWidth - parent.scrollLeft) * 2) < 100) speed = (parentWidth - parent.scrollLeft) * 2; 

    else speed = (parentWidth - parent.scrollLeft) * 2; 

    $(this).parent().animate({ 
     scrollLeft: $(this).siblings(".row-scroll").width() 
    }, speed); 
    // Same thing as before, but this time we scroll all the way to the right side 
}, function() { 
    $(this).parent().stop(); 
});​ 

这是从我的代码直接复制，但想法是健全的，当它接近边缘的乘法减慢。

它不是或接近它，如果完美的你想要的东西更多的微调，那么你应该尝试Pause