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以便拥有容器 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>

在滚动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/

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

1 个答案: