Ionic 4 技术问询：如何隐藏ion-content组件的滚动条

我之前也碰到过这个问题！Ionic 4移除了ion-scroll后，用ion-content时直接写::-webkit-scrollbar { display: none; }确实没用——这是因为ion-content用了Shadow DOM做样式隔离，全局CSS选择器没法穿透到内部的滚动容器上。下面是两个亲测有效的解决方案：

方案一：直接穿透ion-content的Shadow DOM #

在组件的样式文件（比如your-component.component.scss）或者全局样式文件（styles.scss）中添加以下代码：

/* 针对WebKit内核浏览器（Chrome、Safari等） */
::ng-deep ion-content::-webkit-scrollbar {
  display: none;
}

/* 针对Firefox浏览器 */
::ng-deep ion-content {
  scrollbar-width: none;
}

方案二：直接选中内部的滚动容器 #

Ionic 4的ion-content内部的滚动区域是带有.scroll-content类的元素，也可以直接针对这个类设置：

/* WebKit内核浏览器 */
::ng-deep .scroll-content::-webkit-scrollbar {
  display: none;
}

/* Firefox浏览器 */
::ng-deep .scroll-content {
  scrollbar-width: none;
}

注意事项 #

• 如果是在全局样式文件中写，不需要加::ng-deep，因为全局样式本来就可以作用到所有组件；但如果是在组件的私有样式文件中，必须加::ng-deep来打破组件的样式隔离，才能选中ion-content内部的元素。
• scrollbar-width: none是Firefox专属的属性，用来隐藏滚动条；而::-webkit-scrollbar是WebKit内核浏览器的伪元素选择器，两者结合才能兼容主流浏览器。

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