根据可拖动元素滚动div

这基本上就是我想要的：我想通过使用另一个用jquery draggable绑定的元素向上和向下滚动一个包含很长内容的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/

Answer 1

这涉及几个步骤：

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我们将使用的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/