如何使用/通过可拖动对象向上和向下滚动 div答案

【问题标题】：How to scroll a div up and down using/via a draggable object如何使用/通过可拖动对象向上和向下滚动 div
【发布时间】：2013-08-22 01:52:49
【问题描述】：

我想要做的是控制/上下滚动一个 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/

【问题讨论】：

标签： jquery jquery-ui scroll jquery-ui-draggable

【解决方案1】：

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

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

如果 r 为负数，如果为正数，我将上下滚动 div 并添加

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

在可拖动的stop()方法中。

【讨论】：