css - 当父级溢出时使子级下拉可见 :scroll

Question

我看过几个答案 here和 here但这些对我的情况没有帮助。

在我的例子中，我有一个容器，里面有可滚动的内容:

.wrapper {
  border: 1px solid grey;
  width: 200px;
  height: 200px;
  overflow-y: scroll;
}

在内容项中，有修改此内容的下拉菜单。这些是常规的 bootstrap3 下拉菜单，直接来自文档:

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  Action <span class="caret"></span>
</button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

问题是 - 如何在主要文本因溢出而隐藏时使下拉内容可见？

关于类似问题的答案:下拉菜单是文档流的一部分，它们在文本的不同部分随处可见，所以我不能 position:absolute 它们。

在这里 fiddle :https://jsfiddle.net/dfv59nuy/

Answer 1

答案是:不可能，如果你的下拉列表被放置在 inside 具有overflow: scroll(或auto)。

这就是为什么您需要在正确定位时将 .dropdown-menu 动态附加到溢出父级之外的父级。实现这一目标的最佳图书馆之一是 popper.js .
Bootstrap v4 实际上正是出于这个目的而包含它(定位提示框、弹出窗口和下拉菜单，同时将它们附加到与其“明显”父级不同的父级)。它非常快/便宜并且没有依赖性。
可以与 vanilla 或 jQuery 一起使用。

由于您在您的示例中使用了 Bootstrap v3，因此您需要自己调用 Popper(在 v4 中您有辅助类/属性):

const ref = document.querySelector('.dropdown-toggle'), 
      popup = document.querySelector('.dropdown-menu'),
      popper = new Popper(ref, popup, {
        placement: 'bottom',
        positionFixed: true
      });

.wrapper {
  border: 1px solid grey;
  width: 200px;
  height: 200px;
  overflow-y: scroll;
}

<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class='wrapper'>
  <p>This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags
    you want and our generator will generate just as you specified. Pretty cool, isn't it?
  </p>

  <div class="btn-group dropdown">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>
</div>