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添加到其中。

像这样：

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

编辑：我玩弄了你的小提琴，看起来最重要的事情就是阻止你回到你正在寻找的是你min-height用于{{1} } div。

将其更改为：

.moveable

.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; }允许你的div成长。你显然不想在这里，因为如果div可以增长，就不需要滚动。

编辑2：已添加奖励 - 要从屏幕边缘返回滚动条，请覆盖为正文提供的默认边距：

min-height

编辑3：这是一个更新的JSFiddle：https://jsfiddle.net/anishgoyal/hvew0qx4/4/

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

1 个答案: