jquery - 如何使用/通过可拖动对象上下滚动 div

Question

我想要做的是控制/上下滚动div，它的移动取决于拖动的对象。该拖动对象在 jQuery 中是可拖动类型。

例如当我向上拖动对象时，div 向上滚动，反之亦然。

拖动的对象是操纵杆

$("#joystick").draggable({
        revert: true,
        containment: "parent",
        create: function(){
           $(this).data("startLeft",parseInt($(this).css("left")));
           $(this).data("startTop",parseInt($(this).css("top")));
        },
        start: function() {
            animating = true;
        },
        drag: function(event,ui){
            var rel_left = ui.position.left - parseInt($(this).data("startLeft"));
            var rel_top = ui.position.top - parseInt($(this).data("startTop"));
            animate(rel_top)
        },
        stop: function(){
            animating = false;
        },
        axis : "y"
    });

动画函数

var animate = function(r){
        $("#timeline").stop().animate({ scrollTop : r },2000,function(){
            if( animating ){
                animate(r);
            }
        })
    }

此外，该 div 在加载时向下滚动

$("#timeline").animate({ scrollTop: $('#timeline')[0].scrollHeight}, 2000);

这里的例子:http://jsfiddle.net/wq4Lg/

Answer 1

我想我找到了答案，我修改了 animate() 函数。

var s = (r > 0) ? -10 : $("#timeline")[0].scrollHeight;

如果 r 是负数，如果是正数并且还添加了，我将上下滚动 div

$("#timeline").stop();

在draggable内部的stop()方法中。