Bootstrap 4 sticky-top导航栏下拉菜单被截断，如何添加滚动功能？

这个问题我之前在项目里碰到过，Bootstrap 4对下拉菜单的定位和溢出处理做了调整，确实不像3.3.7那样直接设置就行。下面是几个亲测有效的方案，帮你给下拉菜单加上滚动功能：

方案一：自定义CSS给下拉菜单添加滚动容器 #

这是最直接的方法，给目标下拉菜单容器加一个自定义类，限制最大高度并开启垂直滚动：

步骤1：修改HTML结构 #

给需要滚动的.dropdown-menu添加自定义类，比如.dropdown-menu-scrollable：

<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          长内容下拉菜单
        </a>
        <!-- 添加自定义滚动类 -->
        <div class="dropdown-menu dropdown-menu-scrollable" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <!-- 省略大量菜单项 -->
          <a class="dropdown-item" href="#">Last action</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

步骤2：添加CSS样式 #

在样式文件里加入以下代码，根据你的导航栏高度调整max-height的数值（默认Bootstrap 4导航栏高度为56px，这里留了14px的边距）：

.dropdown-menu-scrollable {
  /* 限制最大高度为视口高度减去导航栏高度+边距 */
  max-height: calc(100vh - 70px);
  /* 开启垂直滚动，隐藏水平溢出 */
  overflow-y: auto;
  overflow-x: hidden;
  /* 确保下拉菜单从导航栏下方开始，避免被遮挡 */
  top: 100%;
}

/* 可选：美化滚动条样式（仅webkit内核浏览器） */
.dropdown-menu-scrollable::-webkit-scrollbar {
  width: 6px;
}

.dropdown-menu-scrollable::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.dropdown-menu-scrollable::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.dropdown-menu-scrollable::-webkit-scrollbar-thumb:hover {
  background: #888;
}

方案二：全局生效所有下拉菜单 #

如果你想让所有下拉菜单都具备滚动功能，可以直接修改.dropdown-menu的默认样式，无需添加自定义类：

.dropdown-menu {
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  overflow-x: hidden;
}

不过这种方法要注意，可能会影响原本内容较短的下拉菜单（虽然无功能副作用），按需选择更稳妥。

注意事项 #

• 调整calc(100vh - 70px)的数值：如果你的导航栏是自定义高度，要把70px改成导航栏实际高度加少量边距，避免下拉菜单顶部被遮挡或底部贴死视口边缘。
• 多级下拉菜单处理：如果存在嵌套子菜单，需要给子菜单单独设置滚动样式，或调整子菜单定位，避免嵌套滚动的交互问题。
• 兼容性：calc()和vh单位在现代浏览器及IE11都能正常支持，无需额外兼容处理。

这个方案能实现和Bootstrap 3类似的效果，让过长的下拉菜单内容可以滚动查看，不会被视口截断。

内容的提问来源于stack exchange，提问作者nightspite