当父元素设置了overflow:scroll时，如何使子下拉菜单可见？

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/

- kurtgn

---

你的下拉列表框是否都位于可滚动内容的底部？如果是，你可以使用 dropup 而不是 dropdown。 - Steve K

Answer 1

答案是：如果您的下拉菜单放置在带有overflow：scroll（或auto）的父容器中，则不可能。因此，您需要将.dropdown-menu动态附加到位于溢出父级之外的父级，并将其正确定位。实现此目的的最佳库之一是popper.js。
Bootstrap v4实际上包括了它，正是为了这个目的（将工具提示、弹出窗口和下拉菜单定位并附加到与它们的“表面”父级不同的父级）。它非常快/便宜，并且没有依赖性。
可以使用原始JavaScript或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>

- tao