どのようにネストされた要素の1つだけが親をオーバーフローさせるべきかを達成するには

Question

select要素に複数選択jqueryプラグインを使用しています。外側のdiv（複数選択ボックスを含む）は最大高さを持ちます。私はそれがカットオフされた複数の選択ボックスを開き、私はすべてのオプションを参照するには、下にスクロールする必要がある場合：

$('select').multipleSelect();

#outer { 
 
    max-height: 110px; 
 
    overflow: auto; 
 
    background-color: green; 
 
    color: white; 
 
} 
 
#select { 
 
    width: 200px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.css" rel="stylesheet" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.min.js"></script> 
 
<div id="outer"> 
 
    <p> 
 
    Below you find a multiple select box that should overflow the outer div. 
 
    </p> 
 
    <label for="select">Multiple select:</label> 
 
    <select id="select"> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
    <option value="4">Four</option> 
 
    </select> 
 
    <p> 
 
    Scroll to the button when the select box is open. 
 
    </p> 
 
    <button> 
 
    Do nothing 
 
    </button> 
 
</div>

JSFiddle

を私は複数選択ボックスを開く場合すべてのオプションを表示する必要があります。したがって、オプションは外側のdivよりもオーバーフローする必要があります。どうすればこれを達成できますか？

div.ms-parentの位置をfixedに設定すると、選択ボックスが固定されていて他のコンテンツと一緒に移動していないため、スクロールするまで目的の動作が得られます。

この場合もz-indexを使用しないでください。

Answer 1

私はJQとオールドスクール液の種類を作った（私はmultipleselect（）プラグインに精通していないですと）

はこちらをご覧ください>jsfiddle

コード：

$('select').multipleSelect(); 
var sTop = $('.ms-parent ').offset().top, 
sHeight = $('.ms-parent ').height() 
$('.ms-drop.bottom').css('top',sTop+sHeight) 

CSS

.ms-drop { 
    position:fixed; 
    width:200px; 
} 

fo r .ms-dropそれを得るには、position:fixedに設定する必要があります。その後、のoffset().topとその高さを見つけることによって、JQ iはtopポジションであると計算されました。これらの2つを合わせるとtopの位置が.ms-drop

となります。

EDIT：jsFiddle

あなたはms-dropは同じ位置にとどまり、あなたが緑のdiv（#outer）あなたは、スクロール距離を計算し、スクロール機能を追加する必要があります内側にスクロールすると、下にスクロールしないようにしたい場合はそしてms-dropのtop位置からそれを差し引くので、それは常にあなたが以下JQ必要があります、その位置

に滞在します：

$('select').multipleSelect(); 
var sTop = $('.ms-parent ').offset().top, 
    sHeight = $('.ms-parent ').height() 

$('.ms-drop.bottom').css('top',sTop+sHeight) 
$("#outer").on("scroll",function(){ 
    var oScroll = $(this).scrollTop() 
    $('.ms-drop.bottom').css('top',sTop+sHeight-oScroll) 

}) 

を

Answer 2

このプラグインのcontainerオプションはこれを実現します。このようにプラグインを開始してみてください。

$('select').multipleSelect({ 
    container: "body", 
}); 

https://jsfiddle.net/8mdxuz1w/1/

その後、ドロップダウンの幅を制限する必要があります。