CSS Bootstrap 4 实现下拉菜单滚动

在本文中，我们将介绍如何使用 CSS 和 Bootstrap 4 来实现下拉菜单滚动的效果。

阅读更多：CSS 教程

什么是下拉菜单

下拉菜单是网页设计中常见的一种菜单形式，它由一个主要的菜单项和一系列子菜单项组成。当用户将鼠标悬停在主菜单项上时，子菜单项会以垂直方向展开并显示在主菜单项的下方。

Bootstrap 4 下拉菜单

Bootstrap 4 是一种流行的前端开发框架，它提供了许多实用的组件和工具，方便开发者们快速构建现代化的网页界面。下拉菜单是 Bootstrap 4 中一个非常常见且常用的组件之一。

下面是一个使用 Bootstrap 4 实现的基本下拉菜单示例：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <title>Bootstrap 4 Dropdown</title>
</head>
<body>
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      下拉菜单
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">菜单项1</a>
      <a class="dropdown-item" href="#">菜单项2</a>
      <a class="dropdown-item" href="#">菜单项3</a>
      <a class="dropdown-item" href="#">菜单项4</a>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

在上述示例中，我们使用了 Bootstrap 4 提供的 dropdown 类来创建一个下拉菜单。下拉菜单的按钮由 btn 和 dropdown-toggle 类组成，通过设置 data-toggle 和 data-target 属性来实现下拉和收起的效果。

让下拉菜单滚动

在某些情况下，下拉菜单的菜单项可能过多，导致菜单超出了屏幕范围。这时，我们可以通过一些 CSS 样式来实现下拉菜单的滚动效果，以便用户可以滚动查看全部的菜单项。

请注意，以下示例中的 CSS 代码仅仅是一种实现的方式，您可以根据自己的需求进行修改和优化。

首先，我们需要给下拉菜单的 dropdown-menu 类添加一个最大高度：

.dropdown-menu {
  max-height: 200px;
  overflow-y: auto;
}

上述 CSS 代码将为下拉菜单添加一个最大高度为 200px，并且当菜单内容超出这个高度时，会自动显示垂直滚动条。

此外，为了让滚动条在所有浏览器上都显示一致，我们还可以添加一些样式来调整滚动条的样式：

/* Webkit 滚动条样式 */
.dropdown-menu::-webkit-scrollbar {
  width: 8px;
}

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

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

/* Firefox 滚动条样式 */
.dropdown-menu {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

.dropdown-menu {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

.dropdown-menu::-moz-scrollbar {
  width: 8px;
}

.dropdown-menu::-moz-scrollbar-track {
  background-color: #f1f1f1;
}

.dropdown-menu::-moz-scrollbar-thumb {
  background-color: #888;
}

上述 CSS 代码中，我们分别为 Webkit 内核和 Firefox 浏览器添加了滚动条样式。您可以根据需要自定义这些样式。

示例演示

下面是一个使用上述 CSS 样式实现的带有滚动效果的下拉菜单示例：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="custom.css"> <!-- 自定义的样式表 -->
  <title>Bootstrap 4 Scrollable Dropdown</title>
</head>
<body>
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      下拉菜单
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">菜单项1</a>
      <a class="dropdown-item" href="#">菜单项2</a>
      <a class="dropdown-item" href="#">菜单项3</a>
      <a class="dropdown-item" href="#">菜单项4</a>
      <!-- 重复一些菜单项 -->
      <a class="dropdown-item" href="#">菜单项5</a>
      <a class="dropdown-item" href="#">菜单项6</a>
      <a class="dropdown-item" href="#">菜单项7</a>
      <a class="dropdown-item" href="#">菜单项8</a>
      <a class="dropdown-item" href="#">菜单项9</a>
      <a class="dropdown-item" href="#">菜单项10</a>
      <a class="dropdown-item" href="#">菜单项11</a>
      <a class="dropdown-item" href="#">菜单项12</a>
      <a class="dropdown-item" href="#">菜单项13</a>
      <a class="dropdown-item" href="#">菜单项14</a>
      <a class="dropdown-item" href="#">菜单项15</a>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

在上述示例中，我们引入了一个自定义的样式表 custom.css，其中包含了之前提到的滚动条样式的定义。