1

这基本上是我想要的:我想通过使用与 jquery 可拖动绑定的另一个元素来上下滚动一个包含很长内容的 div。

<div id="wrapper">

<div id="container">

    <div id="timeline_wrapper">
        <div id="timeline">

        </div>
    </div>


    <div style="clear:both"></div>
    <div id="horizontal_control">
        <div id="controller"></div>
    <div>

</div>

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

    }
});

这是获取更多信息的小提琴:http: //jsfiddle.net/xNLsE/4/

4

1 回答 1

0

这包括几个步骤:

  1. 确定可拖动宽度与可滚动高度的比率。换句话说,您需要根据用户拖动的距离知道要滚动多少像素。

    这最终看起来像这样:

    var $controller = $('#controller')
        // The total height we care about scrolling:
        , scrollableHeight = $('#timeline').height() - $('#timeline_wrapper').height()
        // The scrollable width: The distance we can scroll minus the width of the control:
        , draggableWidth = $('#horizontal_control').width() - $controller.width()
        // The ratio between height and width
        , ratio = scrollableHeight / draggableWidth
        , initialOffset = $controller.offset().left;
    

    我还包括initialOffset了我们稍后将使用的。

  2. 将拖动的距离乘以比率来定位可滚动元素。您将对drag可拖动元素执行此操作:

    $controller.draggable({
        revert: false,
        containment: "parent",
        axis: "x",
        drag: function (event, ui) {
            var distance = ui.offset.left - initialOffset;
    
            $('#timeline_wrapper').scrollTop(distance * ratio);
        }
    });
    

    请注意,我们必须考虑可滚动控件的初始偏移量。

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

于 2013-08-05T20:32:00.087 回答