zeckdude zeckdude -4 years ago 139
CSS Question

How can I add a scrollbar to a div that has a parent div with overflow hidden?

I have am restricting the body to be the viewport's height and setting

overflow: hidden
on it. I am using jQuery to slide in a div that is absolutely positioned outside of the viewable area. The div that slides in is larger than the viewport and I would like for its contents to be scrollable within the viewport window.

Here's my fiddle: 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 Source

Set the height of the inner div to that of its container, and then add the property overflow-y: scroll to it.

Like so:

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

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

If you want the div to scroll down at least 1000px (you want a scrollbar without any content in your div), you may want the outer div to have overflow-y set to scroll, like so:

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

.elem {
  height: 1000px;
}

EDIT: I played around with your fiddle, and it looks like the biggest thing holding you back from what you are looking for is that you are using min-height for your .moveable div.

Change it to:

.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 allows your div to grow. You clearly don't want that here, since if the div can grow, there is no need for scrolling.

EDIT 2: Added bonus - to get the scrollbar back from the edge of the screen, override the default margin given to the body:

body {
  margin: 0;
}

EDIT 3: Here's an updated JSFiddle: https://jsfiddle.net/anishgoyal/hvew0qx4/4/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download