Angular 11中如何仅针对mat-select移除自定义webkit滚动条，避免样式全局污染

• 你当前的全局自定义滚动条样式挂在body节点下，会命中所有body后代的可滚动元素，包括mat-select下拉面板内部的滚动容器，因此会出现突兀的8px自定义滚动条
• 之前尝试的方案失效或造成全局污染的本质原因：
  • 裸写::ng-deep时没有外层类名做范围限定，会把组件样式提升为全局生效，匹配全站所有元素的滚动条属性
  • mat-select的下拉浮层（.mat-select-panel）是挂载在全局cdk-overlay-container容器内的，不在自定义select组件的原生DOM树范围，普通组件内部的样式选择器如果不做正确的边界穿透，根本无法匹配到浮层内部的滚动节点

整套方案不会造成全站样式污染，同时完全保留原生滚动交互能力：

1. 给目标mat-select增加专属面板标识
   利用Material组件官方提供的panelClass输入属性，给需要隐藏滚动条的mat-select下拉面板加专属类名，模板写法示例：

   <mat-select panelClass="hide-select-panel-scrollbar">
     <!-- 你的选项内容 -->
   </mat-select>
   

2. 在组件自身的scss文件内编写带精准范围限定的穿透样式
   注意不要把::ng-deep写在样式块的最外层，要让选择器最外层绑定我们刚才加的专属类，从根源上避免全局污染：

   // 写在自定义select组件的独立scss文件中
   .mat-select-panel.hide-select-panel-scrollbar {
     ::ng-deep {
       // 匹配下拉面板内部所有可滚动的容器节点
       .mat-select-content,
       .cdk-virtual-scrollable-wrap {
         // 隐藏webkit系浏览器的自定义滚动条
         &::-webkit-scrollbar {
           display: none !important;
         }
         // 兼容Firefox浏览器的滚动条隐藏
         scrollbar-width: none;
       }
     }
   }
   

• 上述写法的::ng-deep仅用来穿透Material组件自身的样式封装边界，让样式能命中面板内部的滚动子元素，因为最外层有专属类hide-select-panel-scrollbar做范围筛选，样式只会匹配你通过panelClass指定的mat-select下拉面板，完全不会影响其他页面元素的滚动条显示效果
• 隐藏滚动条仅作用于视觉层面，滚动交互（鼠标滚轮、触控板滑动、键盘方向键控制滚动）完全不受影响
• 不需要修改组件的ViewEncapsulation配置，也不会影响全局自定义滚动条在其他页面、其他组件上的正常显示

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