Javascript 如何向具有隐藏溢出的父div的div添加滚动条？

我将主体限制为视口的高度，并在其上设置

overflow:hidden

。我使用jQuery在一个div中滑动，该div绝对位于可视区域之外。滑入的div比视口大，我希望它的内容可以在视口窗口中滚动

这是我的小提琴：

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>

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

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

JavaScript:

<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>

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

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

---

将内部div的高度设置为其容器的高度，然后向其添加属性

overflow-y:scroll

像这样：

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

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

如果希望div向下滚动至少1000px（希望div中没有任何内容的滚动条），则可能希望外部div将overflow-y设置为滚动，如下所示：

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

.elem {
  height: 1000px;
}

编辑：我摆弄了你的提琴，看起来阻碍你寻找的最大的一件事是你正在为你的

.moveable

div使用

min height

将其更改为：

.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可以增长，就不需要滚动

编辑2:增加了额外功能-要从屏幕边缘恢复滚动条，请覆盖正文的默认边距：

body {
  margin: 0;
}

---

编辑3:这里有一个更新的JSFIDLE:

很高兴我能帮忙：）