css - 当父级溢出时使子级下拉可见：滚动

Question

我在这里和这里看到了几个答案，但这些对我的情况没有帮助。

就我而言，我有一个容器，里面有可滚动的内容：

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

在这里摆弄：https ://jsfiddle.net/dfv59nuy/

标签： csstwitter-bootstrap

Answer 1

答案是：如果您的下拉列表使用（或）放置在父级内，则不可能。overflow: scrollauto

这就是为什么您需要在.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>