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