如何限制下拉菜单显示选项数量并添加自定义滚动条？

需求说明 #

• 下拉菜单打开时仅显示4个选项，剩余选项通过侧边自定义滚动条查看
• 仅允许使用HTML5、CSS、JavaScript和jQuery，禁止使用Bootstrap等框架

修改后的完整代码 #

HTML #

<div class="select-menu">
  <div class="select-btn">
    <span class="sBtn-text">Select Shade</span>
    <i class="bx bx-chevron-down"></i>
  </div>

  <ul class="options">
    <li class="option">
      <i class="bx bxs-circle" style="color: #a87a4c;"></i>
      <span class="option-text">Deep 1</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #a67d53;"></i>
      <span class="option-text">Deep 2</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #7d5538;"></i>
      <span class="option-text">Deep 3</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #895e3b;"></i>
      <span class="option-text">Deep 4</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #d9c09f;"></i>
      <span class="option-text">Light 1</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #cea480;"></i>
      <span class="option-text">Light 2</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #d4af8d;"></i>
      <span class="option-text">Light 3</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #c29776;"></i>
      <span class="option-text">Light 4</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #c79b6d;"></i>
      <span class="option-text">Medium 1</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #c7a570;"></i>
      <span class="option-text">Medium 2</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #956946;"></i>
      <span class="option-text">Medium 3</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #a17b51;"></i>
      <span class="option-text">Medium 4</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #714b35;"></i>
      <span class="option-text">Rich 1</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #614633;"></i>
      <span class="option-text">Rich 2</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #4f3a2c;"></i>
      <span class="option-text">Rich 3</span>
    </li>
    <li class="option">
      <i class="bx bxs-circle" style="color: #564439;"></i>
      <span class="option-text">Rich 4</span>
    </li>
  </ul>
</div>

CSS #

.select-menu .options {
  position: relative;
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  display: none;
  cursor: pointer;
  overflow-y: scroll;
  overflow-x: hidden;
  /* 高度适配4个选项：每个option高55px ×4 + 上下padding各20px */
  max-height: 260px;
}

.select-menu.active .options {
  display: block;
}

.options .option {
  display: flex;
  height: 55px;
  cursor: pointer;
  padding: 0 16px;
  border-radius: 8px;
  align-items: center;
  background: #fff;
  margin-bottom: 8px;
}

.options .option:last-child {
  margin-bottom: 0;
}

.options .option:hover {
  background: #F2F2F2;
}

.option i {
  font-size: 25px;
  margin-right: 12px;
}

.option .option-text {
  font-size: 18px;
  color: #333;
}

/* 自定义滚动条样式 */
.options::-webkit-scrollbar {
  width: 6px;
}

.options::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.options::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.options::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

JavaScript #

const optionMenu = document.querySelector(".select-menu"),
  selectBtn = optionMenu.querySelector(".select-btn"),
  options = optionMenu.querySelectorAll(".option"),
  sBtn_text = optionMenu.querySelector(".sBtn-text");

selectBtn.addEventListener("click", () => optionMenu.classList.toggle("active"));

options.forEach(option => {
  option.addEventListener("click", () => {
    let selectedOption = option.querySelector(".option-text").innerText;
    sBtn_text.innerText = selectedOption;

    optionMenu.classList.remove("active");
  });
});

关键修改说明 #

1. 限制下拉菜单高度：给.options设置max-height: 260px，刚好容纳4个高度为55px的选项（加上上下内边距），超出部分自动触发滚动。
2. 自定义滚动条：使用WebKit伪元素替换默认滚动条，实现和你参考示例一致的自定义外观，支持hover状态变化。
3. 选项间距优化：给.option添加底部外边距，提升选项间的视觉层次感（可根据需求调整或移除）。

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