如何自定义Web端ion-select与ion-select-popover的滚动条？

Ionic的ion-select和ion-select-popover基于Shadow DOM实现，普通全局CSS无法直接穿透修改内部滚动条样式，这也是你之前的Webkit设置无效的核心原因。以下是两种可行的解决方法：

方法1：使用Ionic官方推荐的::part选择器（Ionic 6+） #

Ionic 6及以上版本的组件暴露了可自定义的part属性，直接针对弹出层的内容容器设置滚动条样式即可：

/* 在全局样式文件（如global.scss）中添加 */
ion-select-popover::part(content) {
  overflow-y: auto;
}

/* 自定义滚动条宽度 */
ion-select-popover::part(content)::-webkit-scrollbar {
  width: 8px;
}

/* 滚动条轨道样式 */
ion-select-popover::part(content)::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 4px;
}

/* 滚动条滑块样式 */
ion-select-popover::part(content)::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

/* 滑块hover状态 */
ion-select-popover::part(content)::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

方法2：使用穿透选择器（旧版Ionic或Angular项目） #

如果是Ionic 5及以下版本，或者Angular项目中，可使用::ng-deep（Angular专属）或/deep/来穿透Shadow DOM：

/* 在Angular项目全局样式中添加 */
::ng-deep .popover-content.sc-ion-popover-md,
::ng-deep .popover-content.sc-ion-popover-ios {
  overflow-y: auto;
}

::ng-deep .popover-content.sc-ion-popover-md::-webkit-scrollbar,
::ng-deep .popover-content.sc-ion-popover-ios::-webkit-scrollbar {
  width: 8px;
}

::ng-deep .popover-content.sc-ion-popover-md::-webkit-scrollbar-track,
::ng-deep .popover-content.sc-ion-popover-ios::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 4px;
}

::ng-deep .popover-content.sc-ion-popover-md::-webkit-scrollbar-thumb,
::ng-deep .popover-content.sc-ion-popover-ios::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

关键注意事项 #

• 必须将样式放在全局样式文件中（如global.scss、styles.css），组件内的样式无法穿透Shadow DOM
• 不同平台（iOS/MD）的类名可能有差异，可通过浏览器开发者工具查看Shadow DOM内的元素结构，确认目标容器的类名或part名称
• 若使用自定义弹出模板，需确保样式目标指向正确的滚动容器

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