Wie lange Inhalt in ziehbarem Div mit Scrollbar anzeigen?

Question

Ich habe Code geschrieben, um eine ziehbare div zu machen. Das Ergebnis ist: Ich kann das div um den Bildschirm bewegen, aber ich kann den Inhalt im div nicht mit der Bildlaufleiste anzeigen. Der Beispielcode ist:

HTML-Code:

<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-Code:

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

CSS-Code:

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

Das Problem ist: Wenn ich versuche, um nach unten zu scrollen Wenn Sie mehr Text sehen, wird auch das Div mit dem Cursor verschoben. Das macht mich nicht in der Lage, den versteckten Inhalt in der div zu sehen.

Jsfiddle Beispiel: http://jsfiddle.net/SswbX/90/

Hinweis: Dieses Problem tritt nur auf Firefox Browser

Was ich will, ist der Inhalt innerhalb des div Scrollbar mit anzuzeigen.

Answer 1

Sie können ein div hinzufügen, um einen Behälter div und einen Inhalt div haben und Griff Option verwenden. Auf diese Weise wird die Bildlaufleiste auf den Container angewendet und die ziehbare wird nur für den Inhalt aktiviert.

Das einzige Problem ist, dass die Bildlaufleiste ohne Inhalt möglicherweise den Inhalt überlappen.

Etwas wie folgt aus:

hinzufügen Inhalt 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> 

einige padding Ihre Scroll div hinzufügen:

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

Set Griff zum Inhalt und Header:

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

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