CODEWITHSUNDEEP
javascripthtmlcss
zeckdude
zeckdude

Reputation: 16163

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';
  });
});

Upvotes: 2

Views: 309

Answers (1)

Anish Goyal
Anish Goyal

Reputation: 2859

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/

Upvotes: 3

Related Questions