具有overflow：auto的容器剪切的Bootstrap下拉列表

Question

我的应用程序右侧有一个垂直固定侧边栏。它包含一个用户头像列表，每个用户头像在点击时显示一张左侧有选项列表的卡片，其中显示了与该用户相关的一些信息和操作。这是通过对列表中的每个头像使用dropdown-menu position: absolute;来完成的。

最初，该侧边栏只有一些元素，所以我甚至没有想到溢出。但是，现在我需要它能够包含用户想要的尽可能多的元素，所以如果内容溢出侧边栏，我需要滚动内部列表。

我尝试在侧边栏或内部列表中设置overflow-y: auto;，但在这两种情况下，都会导致下拉列集被overflow: auto;容器剪切。

这是最相关的代码。下面我还附上了一个代码片段，其中有一个完整的示例显示了所述行为（全部运行，由于某种原因，下拉列表在嵌入模式下没有触发）。

<aside class="fav-bar">
  <h4 class=sr-only>Favorites</h4>
  <ul class="fav-list">

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
         <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">...</li>
    <li class="fav dropdown">...</li>
    ...

  </ul>
</aside>

.fav-bar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  border-left: 1px solid #d6d6d6;
}

.fav-bar .fav-list {
  list-style: none;
  padding-left: 0;
  height: 100%;
  overflow-y: auto; /*** This is what I need ***/
}

.fav-bar .fav-list .fav .fav-card {
  position: absolute;
  top: 0;
  right: 65px; /* This would normally be 71px */
  border: 1px solid black;
}

.fav-bar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  border-left: 1px solid #d6d6d6;
  background-color: #e5e5e5;
}

.fav-bar .fav-list {
  list-style: none;
  padding-left: 0;
  height: 100%;
  overflow-y: auto; /*** This is what I need ***/
}

.fav-bar .fav-list .fav {
  position: relative;
  margin-bottom: 5px;
}

.fav-bar .fav-list .fav img {
  border-radius: 50%;
}

.fav-bar .fav-list .fav .fav-card {
  width: 350px;
  position: absolute;
  top: 0;
  right: 65px; /* This would normally be 71px */
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>


<aside class="fav-bar">
  <h4 class=sr-only>Favorites</h4>
  <ul class="fav-list">
  
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
         <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
  
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
  
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
  
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
  
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
  
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
  
  </ul>
</aside>

正如您在CSS评论中看到的那样，我尝试将.fav-list设置为overflow: auto;（我也尝试在.fav-bar上执行此操作），但这会使下拉列表剪切为容器的边界。此外，我修改了下拉列表的位置，以便在触发时可以看到其中的一部分。

所以我的问题是，有没有办法实现我需要的行为？

我一直在谷歌搜索几个小时，但我找不到任何有用的东西。到目前为止，我发现的“最佳”解决方案（我还没有尝试）是使用带有data-container="body"而不是下拉列表的Bootstrap popovers，但我更愿意尽可能少地修改我的标记，因为那些卡片非常复杂，这意味着CSS和JS都会发生一些重大变化。

就是这样。你知道我可以尝试使列表滚动同时保持下拉列表的任何解决方案吗？

Answer 1

单独使用CSS无法实现您的目标。如果您将overflow-y的{​​{1}}设置为<ul class="fav-list">而将scroll设置为overflow-x，那么您会注意到尽管您已visible菜单被剪裁可以向上和向下滚动以查看所有dropdown个。 <li> dropdown overflow设置<ul class="fav-list">到visible的唯一方法是将<li>设置为overflow，但是无法向上和向下滚动以查看所有<ul class="fav-list">的

您有两个选择，要么您可以重构HTML然后重新设置它，或者您可以使用一些小jQuery。 jQuery解决方案不是最干净的解决方案，但如果您坚持使用当前的HTML结构，那么它将起作用。单击visible后，我使用的jQuery函数会将<li>的{​​{1}}属性更改为dropdown，从而使<li>菜单可见，但您赢了dropdown菜单打开时，无法向上和向下滚动查看<li>的其余部分。接下来，一旦您点击overflow-y以外的任何其他元素，<ul class="fav-list">的{​​{1}}属性就会更改为scroll，以便您可以向上和向下滚动到查看<li>的其余部分。

这是一个演示（查看整页）：

$( document ).ready(function() {
  $( ".dropdown" ).click(function() {
    $(".fav-list").css("overflow","visible");
});

$(document).mouseup(function (e)
{
    var container = $(".dropdown");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        $(".fav-list").css("overflow-y","scroll");
    }
});
});

.fav-bar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  border-left: 1px solid #d6d6d6;
  background-color: #e5e5e5;
}

.fav-bar .fav-list {
  list-style: none;
  padding-left: 0;
  height: 100%;
  overflow-y: scroll
}

.fav-bar .fav-list .fav {
  position: relative;
  margin-bottom: 5px;
}

.fav-bar .fav-list .fav img {
  border-radius: 50%;
}

.fav-bar .fav-list .fav .fav-card {
  width: 350px;
  position: absolute;
  top: 0;
  right: 65px; /* This would normally be 71px */
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<aside class="fav-bar">
  <h4 class=sr-only>Favorites</h4>
  <ul class="fav-list">
  
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
         <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
        
        <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
         <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
            
            <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
         <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
                
                <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
         <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
        
        <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
         <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
        
            <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
                
                    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
  
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
        
            <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
  
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
  
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
  
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
  
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
  
  </ul>
</aside>

另一种解决方案：

.fav-bar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  border-left: 1px solid #d6d6d6;
  background-color: #e5e5e5;
}
.fav-bar .fav-list {
  list-style: none;
  padding-left: 0;
  height: 100%;
  overflow-y: scroll;
  /*** This is what I need ***/
}
.fav-bar .fav-list .fav {
  position: relative;
  margin-bottom: 5px;
}
.fav-bar .fav-list .fav img {
  border-radius: 50%;
}
.fav-bar .fav-list .fav .fav-card {
  width: 350px;
  position: absolute;
  top: 0;
  right: 65px;
  /* This would normally be 71px */
  border: 1px solid black;
}
.fav-bar .fav-list .fav .fav-card {
  width: 350px;
  position: relative;
  top: 0px;
  right: 0px;
  border: 1px solid black;
  float: none;
  vertical-align: middle;
}
.open>.dropdown-menu {
  display: inline-block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />


<aside class="fav-bar">
  <h4 class=sr-only>Favorites</h4>
  <ul class="fav-list">

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>
    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

    <li class="fav dropdown">
      <a class="fav-thumb dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="avatar" src="http://placehold.it/70/70" alt="">
      </a>
      <div class="fav-card dropdown-menu dropdown-menu-right" role="menu">
        Some content here
      </div>
    </li>

  </ul>
</aside>