jquery - 如何使用滚动条查看可拖动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/