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进行操作。

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

Answer 1

答案是：不可能，如果您的下拉菜单位于{em {em} {em} overflow: scroll（或auto）的父级中。

这就是为什么您需要在正确放置.dropdown-menu的情况下，将const ref = document.querySelector('.dropdown-toggle'), popup = document.querySelector('.dropdown-menu'), popper = new Popper(ref, popup, { placement: 'bottom', positionFixed: true });动态附加到溢出父级之外的父级。实现这一目标的最佳库之一是popper.js。
Bootstrap v4实际上正是出于此目的而包括它（定位“ toothlips”，“ popovers”和“ dropdowns”，并将它们附加到与其““ apparent””父代不同的父代）。它非常快速/便宜并且没有依赖性。
可以与Vanilla或jQuery一起使用。

由于在示例中使用了Bootstrap v3，因此您需要自己调用Popper（在v4中，您需要使用助手类/属性）：

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

collections.Counter

父母溢出时让孩子下拉菜单可见：滚动

1 个答案: