如何为Angular Material下拉面板滚动条添加上下箭头？

核心思路 #

利用WebKit滚动条的伪元素::-webkit-scrollbar-button定义上下箭头按钮，通过CSS伪元素生成箭头样式，同时确保样式精准作用到mat-select的自定义面板上。

具体实现步骤 #

1. 为mat-select面板绑定自定义类 #

在模板中为mat-select指定panelClass，让自定义样式能精准定位目标面板：

<mat-select [panelClass]="'custom-panel-siteId'" placeholder="选择站点">
  <!-- 下拉选项内容 -->
</mat-select>

2. 编写滚动条及按钮的自定义样式 #

延续Orangeable的橙色风格，编写CSS样式（推荐放在全局样式文件如styles.css，若放在组件内样式文件则需添加::ng-deep前缀穿透隔离）：

/* 设置面板滚动容器的基础属性 */
.custom-panel-siteId {
  max-height: 300px; /* 根据需求设置触发滚动的高度 */
  overflow-y: auto;
}

/* 滚动条整体宽度 */
.custom-panel-siteId::-webkit-scrollbar {
  width: 12px;
}

/* 滚动条轨道样式 */
.custom-panel-siteId::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 8px;
}

/* 滚动条滑块样式（匹配Orangeable风格） */
.custom-panel-siteId::-webkit-scrollbar-thumb {
  background-color: #ff9800;
  border-radius: 8px;
  border: 3px solid #f1f1f1;
}

/* 滚动条上下按钮基础样式（默认隐藏，需手动显示） */
.custom-panel-siteId::-webkit-scrollbar-button {
  display: block;
  height: 16px;
  background-color: #f1f1f1;
  border-radius: 4px;
  cursor: pointer;
}

/* 向上滚动按钮的箭头样式 */
.custom-panel-siteId::-webkit-scrollbar-button:single-button:vertical:decrement {
  position: relative;
}

.custom-panel-siteId::-webkit-scrollbar-button:single-button:vertical:decrement::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 6px;
  height: 6px;
  border-left: 2px solid #ff9800;
  border-top: 2px solid #ff9800;
}

/* 向下滚动按钮的箭头样式 */
.custom-panel-siteId::-webkit-scrollbar-button:single-button:vertical:increment {
  position: relative;
}

.custom-panel-siteId::-webkit-scrollbar-button:single-button:vertical:increment::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-135deg);
  width: 6px;
  height: 6px;
  border-left: 2px solid #ff9800;
  border-top: 2px solid #ff9800;
}

/* 按钮hover状态优化 */
.custom-panel-siteId::-webkit-scrollbar-button:hover {
  background-color: #e0e0e0;
}

.custom-panel-siteId::-webkit-scrollbar-button:hover::before {
  border-color: #e68900;
}

3. 关键注意事项 #

• 样式生效范围：若将样式写在组件内部，需添加::ng-deep前缀（Angular 15仍支持该写法，也可选择开启ViewEncapsulation.None或使用全局样式文件）。
• 浏览器兼容性：::-webkit-scrollbar系列伪元素仅支持WebKit内核浏览器（Chrome、Edge、Safari），Firefox不支持自定义滚动条按钮，箭头效果无法在Firefox中显示。
• 样式定制空间：可根据需求调整箭头尺寸、颜色，或替换为背景图实现更复杂的箭头样式。

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