Antd Select组件滚动条始终显示问题（Firefox兼容异常）

Chrome通过WebKit内核的伪元素实现了滚动条自定义，但Firefox有独立的标准滚动条属性，需单独配置来实现兼容：

核心思路 #

• 强制容器始终显示垂直滚动条
• 用Firefox专属属性定义滚动条的宽度与颜色，对齐Chrome端样式

完整兼容代码 #

/* Chrome/Safari/WebKit 内核浏览器 */
.rc-virtual-list-holder::-webkit-scrollbar {
  -webkit-appearance: button !important;
  width: 10px !important;
}
.rc-virtual-list-holder::-webkit-scrollbar-thumb {
  border-radius: 5px !important;
  background-color: rgba(0,0,0,.3) !important;
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5) !important;
}

/* Firefox 浏览器 */
.rc-virtual-list-holder {
  /* 强制垂直滚动条始终显示，不受内容高度影响 */
  overflow-y: scroll !important;
  /* 设置滚动条为细样式，匹配Chrome的10px宽度视觉效果 */
  scrollbar-width: thin !important;
  /* 第一个值为滑块颜色，第二个为轨道颜色（透明化对齐Chrome样式） */
  scrollbar-color: rgba(0,0,0,.3) transparent !important;
}

关键属性说明 #

1. overflow-y: scroll：这是Firefox下滚动条始终可见的核心，强制容器无论内容是否超出都显示滚动条
2. scrollbar-width：控制滚动条宽度，可选值为auto/thin/none，这里用thin贴近Chrome的窄滚动条样式
3. scrollbar-color：分别定义滑块和轨道的颜色，轨道设为透明可以和Chrome端的无背景轨道视觉统一

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