CSS自定义droplist下拉列表滚动条不显示，如何实现默认展示5项可滚动

问题原因 #

滚动条生效的前提是容器高度小于内容总高度，你当前没有给.select .selectDropdown设置最大高度限制，容器会被所有选项自动撑开至和内容等高，所以滚动属性不会生效。

解决方法 #

给.select .selectDropdown添加对应5个选项总高度的max-height属性即可。你代码中单个.option上下内边距各10px，内容高度约20px，单选项总高度约40px，5个选项总高度为200px，直接设置该值即可。同时建议将overflow-y: scroll改为overflow-y: auto，选项不足5个时自动隐藏滚动条，体验更友好。

修改后的对应CSS代码如下：

.select .selectDropdown {
  position: absolute;
  top: 100%;
  width: 100%;
  border-radius: 0 0 3px 3px;
  overflow-y: auto; /* 替换原有scroll值，按需显示滚动条 */
  overflow-x: hidden;
  max-height: 200px; /* 新增：限制最大高度为5个选项的总高度 */
  background: var(--bg1);
  border-top: 1px solid #eee;
  z-index: 1;
  background: #fff;
  -webkit-transform: scale(1, 0);
          transform: scale(1, 0);
  -webkit-transform-origin: top center;
          transform-origin: top center;
  visibility: visible;
  transition: 0.2s ease;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}

如果后续调整了选项的字体大小、内边距，只要按实际单个选项高度重新计算max-height即可，也可以写成max-height: calc(5 * 单个选项高度px)的格式更便于维护。

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