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

最简单的答案是，您希望确保将动画设置为缓动设置为线性。

.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
  });
}

Answer 2

前一段时间我遇到了同样的问题并把它放在一起，基本上它是一个无限滚动解决方案：

编辑：以下是我的代码适用于您的用例：

// 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

Answer 3

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

mQuery在mousedown上顺利滚动

3 个答案: