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

我已经编写了制作可拖动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>

CSS代码：

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

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

JSFIDLE示例：

注意：此问题仅在Firefox浏览器上发生

---

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

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

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

大概是这样的：

添加内容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>

将句柄设置为内容和标题：

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

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

---

了不起的男人！太谢谢你了。

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