如何使用滚动条查看可拖动 div 中的长内容？

Question

我已经编写了代码来制作一个可拖动的 div。结果是：我可以在屏幕上移动 div，但无法使用滚动条查看 div 内的内容。示例代码为：

HTML 代码：

<div class="draggable"> 
<h2>This will drag the div</h2>
<div class="scroll">This won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag 

the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the divThis won't drag the div</div>
</div>

Javascript 代码：

$(document).ready(function() {
        $('.draggable').draggable({
                scroll: true});
    });

CSS 代码：

.scroll
  {
    width: 100px;
    height: 80px;
    overflow: auto;
  }

问题是：当我尝试向下滚动查看更多文本时，它也会随着光标移动 div。这让我无法看到 div 中的隐藏内容。

Jsfiddle 示例：http://jsfiddle.net/SswbX/90/

注意：这个问题只发生在 Firefox 浏览器上

我想要的是使用滚动条查看 div 内的内容。

Answer 1

您可以添加一个 div 以便拥有一个 container div 和一个 content div 并使用 handle 选项。这样，滚动条将应用于容器，而可拖动将仅在内容上激活。

唯一的问题是如果没有填充滚动条可能会与内容重叠。

类似这样的：

添加内容 div

<div class="draggable">
  <h2>This will drag the div</h2>
  <div class="scroll">
    <div class="content">This won't drag the divThis won't drag the divThis won't drag the div...</div>
  </div>
</div>

为你的滚动 div 添加一些内边距：

  .scroll {
    width: 100px;
    height: 80px;
    overflow: auto;
    padding-right: 15px;
  }

设置内容和标题的句柄：

$(document).ready(function() {
  $('.draggable').draggable({
    scroll: true,
    handle: '.content, h2'
  });
});

http://jsfiddle.net/9j4rfLhL/5/