オーバーフローを隠している親divを持つdivにスクロールバーを追加するにはどうすればよいですか？

Question

ボディをビューポートの高さに制限し、overflow: hiddenを設定しています。私はjQueryを使用して、表示可能領域の外に絶対配置されたdiv内をスライドします。スライドインするdivはビューポートより大きく、その内容がビューポートウィンドウ内でスクロール可能であることを望みます。

は、ここに私のバイオリンです：https://jsfiddle.net/hvew0qx4/1/

HTML：

<div class='buttons'> 
    <button id="toggle-results">Show Results</button> 
</div> 

<div class="map general-styling"></div> 

<div id="results-area" class='movable'> 
    <div class="results general-styling"></div> 
</div> 

はCSS：

body { 
    height: 100vh; 
    overflow: hidden; 
    position: relative; 
} 

.general-styling { 
    box-sizing: border-box; 
    width: 100%; 
    border-width: 10px; 
    border-style: solid; 
} 

.movable { 
    transition: all 0.3s ease; 
    position: absolute; 
    z-index: 44; 
    width: 100vw; 
    min-height: 100vh; 
    background-color: white; 
    overflow-y: scroll; 
} 

.map { 
    background-color: red; 
    border-color: pink; 
    height: 100vh; 
} 

.results { 
    background-color: blue; 
    border-color: orange; 
    height: 1000px; 
} 

.buttons { 
    position: absolute; 
    z-index: 1000; 
    top: 40px; 
    right: 40px; 
} 

はJavaScript：

var $toggleResultsBtn = $('#toggle-results'); 
var $resultsArea = $('#results-area'); 
var $body = $('body'); 

$('.movable').css('top', $body.height()); 

$toggleResultsBtn.on('click', function(){ 
    $toggleResultsBtn.text(function(i, text){ 
    return text === "Show Results" ? "Hide Results" : "Show Results"; 
    }); 

    $resultsArea.css('top', function(i, value){ 
    return value === '0px' ? $body.height() : '0px'; 
    }); 
}); 

Answer 1

内側のdivの高さをコンテナの高さに設定し、プロパティoverflow-y: scrollを追加します。

ので、同じように：あなたはdiv要素は、少なくとも1000pxを（あなたがあなたのdiv内のコンテンツのないスクロールバーをしたい）スクロールダウンしたい

.container { 
    height: 200px; 
    overflow: hidden; 
} 

.elem { 
    height: 200px; 
    overflow-y: scroll; 
} 

場合は、外側のdivは、オーバーフロー-yのセットを持っている場合がありますスクロールするには、そのよう：

.container { 
    height: 200px; 
    overflow-y: scroll; 
} 

.elem { 
    height: 1000px; 
} 

EDIT：私はあなたのフィドルの周り演奏し、バックあなたが探しているものからあなたを保持している最大のものは、あなたののためにあなたがmin-heightを使用していることであるように見えますdiv。

に変更し、それを：

.movable { 
    transition: all 0.3s ease; 
    position: absolute; 
    z-index: 44; 
    width: 100vw; 
    height: 100vh; /* Change was made on this line */ 
    background-color: white; 
    overflow-y: scroll; 
} 

min-heightは、あなたのdivが成長することができます。 divを成長させることができれば、スクロールする必要はないので、ここではそのようなことは明確にしないでください。

EDIT 2：追加ボーナス - 体に与えられたデフォルトのマージンをオーバーライドし、バックスクリーンの端からスクロールバーを取得する：

body { 
    margin: 0; 
} 

EDIT 3：はここに更新JSFiddleです。 https://jsfiddle.net/anishgoyal/hvew0qx4/4/