内容溢出时无法滚动

Posted 2023-05-08

【中文标题】内容溢出时无法滚动

【英文标题】：Can't scroll when content overflows

【发布时间】：2018-07-22 13:41:57

【问题描述】：

我有一个在 Chrome 上完美运行的下拉菜单，但是，数据溢出列表，我无法向下滚动。我尝试使用“溢出：隐藏”，但它只是隐藏了溢出数据，而无法在 Chrome 和资源管理器上向下滚动。

<div class="dropdown info-required">
    <button name="mccGroupButton" class="btn btn-default text-left dropdown-toggle 
                 requiredInput picklistOverflow form-control" type="button" 
                 id="mccGroupButtonId" data-toggle="dropdown" aria-expanded="true" 
                 style="text-align: left !important; padding-right:5px;width:140px;
                 position: relative;"> 
      <span id="chosenGroup"></span>
      <span class="mccArrow">▾</span>
    </button>
  <ul id="mccGroupUlId" class="dropdown-menu picklistValuesOverflow" role="menu" 
          aria-labelledby="mccGroupButtonId" style="width:auto;min-width:250px;
          height:220px; bottom: 0px;">
  </ul>
</div>

【参考方案1】：

使用overflow:hidden，任何大于固定大小 div 的内容都将被隐藏。

改为使用

overflow:scroll

这将强制始终显示滚动条。它会在不需要时被禁用，并根据需要自动启用。这可确保您的内容始终保持一致。

替代方案是：

overflow:auto

或

overflow-y:auto

它只会根据需要显示滚动条 - 但如果您的内容是动态更改的，则可能会强制更改布局。所以使用哪个取决于您的要求。

---

每个示例：

div 
border:1px solid #CCC;
float:left;
width:75px;
height:75px;

<div style='overflow:auto'>
auto 
</div>
<div style='overflow:auto'>
auto<br/>
1<br/>2<br/>3<br/>4<br/>5<br/>6
</div>
<div style='overflow:scroll'>
scroll<br/>
1<br/>2<br/>3<br/>4<br/>5<br/>6
</div>
<div style='overflow-y:scroll'>
scroll-y<br/>
1<br/>2<br/>3<br/>4<br/>5<br/>6
</div>
<div style='overflow:hidden'>
hidden<br/>
1<br/>2<br/>3<br/>4<br/>5<br/>6
</div>

【讨论】：

感谢您提供如此详细而专业的回答。

【参考方案2】：

<ul id="mccGroupUlId" class="dropdown-menu picklistValuesOverflow" role="menu" 
          aria-labelledby="mccGroupButtonId" style="width:auto;min-width:250px;
          height:auto; bottom: 0px;">

制作高度：自动；

它不会让滚动填充整个内容的高度