如何隐藏Angular cdk-virtual-scroll-viewport的滚动条？

你之前的CSS无效是因为cdk-virtual-scroll-viewport的滚动条实际属于其内部的滚动容器，而非该元素本身。以下是覆盖主流浏览器的有效方案：

方法一：全局样式文件（推荐） #

在项目全局样式文件（如styles.css/styles.scss）中添加：

/* Chrome、Safari等WebKit内核浏览器 */
cdk-virtual-scroll-viewport::-webkit-scrollbar {
  display: none;
}

/* Firefox */
cdk-virtual-scroll-viewport {
  scrollbar-width: none;
  /* IE 和 Edge */
  -ms-overflow-style: none;
}

方法二：组件内样式（需穿透视图封装） #

如果要在组件的样式文件中写，需要使用::ng-deep穿透Angular的视图封装：

::ng-deep cdk-virtual-scroll-viewport::-webkit-scrollbar {
  display: none;
}

::ng-deep cdk-virtual-scroll-viewport {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

备选方案：直接针对内部滚动容器 #

也可以直接选中cdk-virtual-scroll-viewport内部的滚动容器类：

cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper::-webkit-scrollbar {
  display: none;
}

cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

注意：不要给父容器设置overflow:hidden或强行加宽组件，这会破坏虚拟滚动的尺寸计算，导致功能失效。

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