基于可拖动元素滚动 div

Posted 2023-05-08

【中文标题】基于可拖动元素滚动 div

【英文标题】：Scroll a div based on a draggable element

【发布时间】：2013-08-06 15:20:21

【问题描述】：

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

【问题讨论】：

你想做什么？使用jQuery可拖动创建滚动条？

我想使用可拖动来向上/向下滚动一个 div。

为什么不使用jscrollpane.kelvinluck.com？ Draggable 并不是为了那个。

我试图通过向左移动 div 向下滚动来实现，如果向右滚动则向上滚动。

【参考方案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，我们稍后会用到。

将拖动的距离乘以比率来定位可滚动元素。您将在可拖动元素的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/