Ionic 6中如何自定义ion-modal内的滚动条样式？

核心原因 #

Ionic的ion-modal和内部的ion-content都使用了Shadow DOM，普通全局CSS选择器无法穿透到Shadow DOM内部，导致你之前写的::-webkit-scrollbar系列伪类无法生效。

解决方案 #

1. 使用CSS Shadow Parts（推荐） #

Ionic组件暴露了Shadow Parts，可直接通过:part()选择器定位滚动容器：

/* 自定义modal内ion-content的滚动条样式 */
ion-modal ion-content::part(scroll)::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
}

ion-modal ion-content::part(scroll)::-webkit-scrollbar-track {
  background: #f1f1f1; /* 轨道背景色 */
  border-radius: 4px;
}

ion-modal ion-content::part(scroll)::-webkit-scrollbar-thumb {
  background: #888; /* 滑块颜色 */
  border-radius: 4px;
}

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

2. 框架特定的样式穿透（备选） #

如果使用Angular或Vue，可借助框架提供的穿透语法（注意部分语法已标记为废弃，仅作备选）：

Angular 示例：

::ng-deep ion-modal ion-content .inner-scroll::-webkit-scrollbar {
  width: 8px;
}

::ng-deep ion-modal ion-content .inner-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::ng-deep ion-modal ion-content .inner-scroll::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

Vue 示例：

::v-deep ion-modal ion-content .inner-scroll::-webkit-scrollbar {
  width: 8px;
}

/* 其余滚动条样式同Angular示例 */

3. 给Modal添加自定义类并写全局样式 #

打开Modal时添加自定义类，再针对该类写全局滚动条样式：

// 以Ionic Vue为例，打开Modal的代码
const modal = await modalController.create({
  component: YourModalComponent,
  cssClass: 'custom-modal' // 添加自定义类名
});
await modal.present();

对应的全局CSS：

.custom-modal ion-content .inner-scroll::-webkit-scrollbar {
  width: 8px;
}

.custom-modal ion-content .inner-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.custom-modal ion-content .inner-scroll::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

注意事项 #

• 所有样式必须写在全局样式文件（如global.css/styles.css）中，局部组件样式无法穿透Shadow DOM。
• 若选择器无效，可通过浏览器开发者工具查看Modal内部DOM结构，定位实际的滚动容器元素。

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