containment:'document'
ドラッグ可能に設定して使用するappendTo:'body'
と、スクロールバーの表示が停止します。例えば:
$(".item").draggable({
helper: 'clone',
appendTo: 'body',
cursor: 'move',
containment:'document'
});
この問題は、絶対的に配置されたコンテナが新しい個別のスタッキングコンテキストを作成し、ドラッグ可能なものがより低いスタッキング順序で何かに追加されているために発生しています。
編集:代替ソリューション-jsFiddleデモ
本当にコンテンツペインにスクロールバーを残したい場合、私が考えることができる唯一の解決策は、同じスタッキングコンテキストを共有するようにコンテンツペイン内でナビゲーションペインを移動するためにマークアップを変更する必要があることです。そのため、コンテンツペインにスクロールバーを保持するために、いくつかのセマンティック構造を犠牲にする必要がありました。もう1つの問題は、を使用しているときにスクロールバーがナビゲーションペインの下に表示されなくなることですposition:fixed
。ウィンドウの下部全体をスクロールするよりも良いと思いました。
HTML
<div id="contentpane">
<div id="navpane">
<div class="item">Item A</div>
<div class="item">Item B</div>
<div class="item">Item C</div>
<div class="item">Item D</div>
</div>
</div>
CSS
.item {
border: 1px solid black;
width:200px;
margin-top: 5px;
}
#navpane {
background-color:lightblue;
width:250px;
position:fixed;
top:0;
bottom:0;
left:0;
}
#contentpane {
background-color:lightgreen;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
overflow-x:auto;
overflow-y:hidden;
}
JavaScript
$(function () {
$('.item').draggable({
helper: 'clone',
appendTo: '#contentpane',
cursor: 'move'
});
});