2

私がやりたいことは、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/

4

1 に答える 1

1

私は答えを見つけたと思います.animate()関数を修正しました.

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

rが負の場合、正の場合はdivを上下にスクロールし、さらに追加します

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

ドラッグ可能内の stop() メソッドで。

于 2013-08-21T17:52:49.233 に答える