为什么滚动时下拉列表会粘在顶部和底部？

Question

打开下拉列表后，滚动列表时会卡在 div 的顶部或底部。我尝试更改父 div 和下拉列表的位置。但是想不通。有什么方法可以使下拉列表随按钮一起滚动吗？

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
   <div class="card"> 
  <div class="dropdown mb-3">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
    </div>
  </div>
  <div class="dropdown mb-3">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </div>
  <div class="dropdown mb-3">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
    </div>
  </div>
  <div class="dropdown mb-3">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
    </div>
  </div>
</div>
</body>
</html>

.card {
    height: 150px;
    width: 30%;
    border: 2px solid black;
    margin: 100px 0px 0px 100px;
    overflow: auto;
}

Answer 1

当菜单越界时，bootstrap的js通过调整位置使其粘在边界上以保持菜单停留。

当它越界时，bootstarp 设置 x-out-of-boundaries 属性来识别它。

你可以用这个来实现。

.dropdown-menu[x-out-of-boundaries] {
    transform: translate3d(0px, 30px, 0px) !important;
}

您可以根据需要调整位置。

Here就是一个例子。

为什么滚动时下拉列表会粘在顶部和底部？

Why the drop-down list is sticking to top and bottom when scrolling?

html

css

bootstrap-4

drop-down-menu

dropdown