基于可拖动元素滚动 div（反向）

Question

我发现这段代码通过可拖动元素滚动 div。我不太明白发布的答案，我也想反过来做。

原文：Scroll a div based on a draggable element

http://jsfiddle.net/xNLsE/8/

我修改了小提琴并使其在加载时向下滚动，原始答案无需向下滚动内容即可工作。

我添加了这个块让它向下滚动

    //modification
var timeline = $('#timeline');
var tlParent = timeline.parent();
var tlHeight = parseInt(timeline.css("height"));
var tlPHeight = parseInt(tlParent.css("height"));

//scroll down the content on load
var newPos = 0 - (tlHeight - tlPHeight);
timeline.animate({"top":newPos + "px"},800,"linear");
//end modification

我的修改：http://jsfiddle.net/j3toxicat3d/hxBGd/

帮助任何人？谢谢

Answer 1

嘿，我与这个脚本进行了斗争并让它反向工作 -

//modification
var timeline = $('#timeline');
var tlParent = timeline.parent();
var tlHeight = timeline.height();
var tlPHeight = tlParent.height();

//scroll down the content on load
var lastDirection
, newPos = tlHeight - tlPHeight;
$('#timeline_wrapper').animate({scrollTop:newPos + "px"},800,"linear");
//end modification


var $controller = $('#controller')
    , scrollableHeight = $('#timeline').height() - $('#timeline_wrapper').height()
    , draggableWidth = $('#horizontal_control').width() - $controller.width()
    , ratio = scrollableHeight / draggableWidth
    , initialOffset = $controller.offset().left;

$controller.draggable({
    revert: false,
    containment: "parent",
    axis: "x",
    drag: function (event, ui) {
        var distance = ui.offset.left - initialOffset
        , currentPos = $('#timeline_wrapper').scrollTop();
        var direction = ui.position.left;
        (lastDirection < direction) ? $('#timeline_wrapper').scrollTop(currentPos - distance) : $('#timeline_wrapper').scrollTop(currentPos + distance);
        lastDirection = ui.position.left;
    }
});

我想你会注意到我修改了什么。

Here is a working jsFiddle Demo