如何使用滾動條查看可拖動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/

注：此問題只發生在器火狐瀏覽器

我想要的是查看使用滾動條在div裏面的內容。

Answer 1

您可以添加一個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/