Question

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

原文：Scroll a div based on a draggable element

我修改了小提琴并使其在加载时向下滚动，原始答案可以在不滚动内容的情况下工作。

我添加了这个块以便向下滚动

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

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

1 个答案: