如何在Angular 6应用中无需修改HTML实现类Mac OS自定义滚动条？

嗨～作为Angular新手，想全局替换滚动条又不想动HTML结构，这个需求太常见了！我来给你拆解两个可行的方案，帮你搞定Mac风格的滚动条：

这个方案不用任何插件，直接通过CSS就能实现你要的透明、悬浮、hover显示效果，而且完全不用修改现有HTML，只需要把代码加到全局样式文件（比如src/styles.css）里就行。

Webkit内核浏览器（Chrome、Safari、Edge等） #

这类浏览器支持完整的自定义滚动条CSS属性，能完美模拟Mac风格：

/* 全局设置滚动条尺寸 */
::-webkit-scrollbar {
  width: 6px; /* 垂直滚动条宽度 */
  height: 6px; /* 水平滚动条高度 */
}

/* 滚动条轨道（背景）设置为透明 */
::-webkit-scrollbar-track {
  background: transparent;
}

/* 滚动条滑块（拖动部分）默认透明 */
::-webkit-scrollbar-thumb {
  background: rgba(140, 140, 140, 0);
  border-radius: 3px; /* 圆角模拟Mac风格 */
  transition: background 0.2s ease; /* 平滑过渡效果 */
}

/* 鼠标悬停滑块时显示半透明效果 */
::-webkit-scrollbar-thumb:hover {
  background: rgba(140, 140, 140, 0.6);
}

/* 滚动容器被hover时，滑块也显示浅透明状态 */
:hover::-webkit-scrollbar-thumb {
  background: rgba(140, 140, 140, 0.4);
}

Firefox浏览器兼容 #

Firefox支持的滚动条自定义属性有限，但也能实现近似效果：

/* 全局设置Firefox滚动条为细款 */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(140,140,140,0) transparent; /* 滑块默认透明，轨道透明 */
}

/* 容器hover时，滑块显示半透明 */
:hover {
  scrollbar-color: rgba(140,140,140,0.6) transparent;
}

这个方案的优势是简单、轻量，不需要引入任何依赖，大部分现代浏览器都能覆盖，完全符合你“无需修改HTML全局替换”的要求。

你提到的ngx-perfect-scrollbar默认确实需要用<perfect-scrollbar>标签包裹内容，但我们可以通过自定义全局指令来实现自动给所有滚动容器应用它的功能，不用手动写标签。

步骤如下：

1. 首先确保已经安装了依赖：

npm install ngx-perfect-scrollbar perfect-scrollbar --save

2. 创建一个全局指令（比如global-scrollbar.directive.ts）：

import { Directive, ElementRef, OnInit } from '@angular/core';
import PerfectScrollbar from 'perfect-scrollbar';

@Directive({
  // 选择器匹配所有元素，除了带有`no-scrollbar`属性的元素（可以用来排除不需要的容器）
  selector: '*:not([no-scrollbar])'
})
export class GlobalScrollbarDirective implements OnInit {
  constructor(private el: ElementRef) {}

  ngOnInit() {
    const container = this.el.nativeElement;
    // 只给有滚动需求的容器初始化（内容超过容器尺寸）
    if (container.scrollHeight > container.clientHeight || container.scrollWidth > container.clientWidth) {
      // 初始化perfect-scrollbar，配置成Mac风格
      new PerfectScrollbar(container, {
        wheelSpeed: 0.6,
        minScrollbarLength: 20,
        maxScrollbarLength: 100,
        suppressScrollX: false,
        suppressScrollY: false,
        wheelPropagation: false
      });
    }
  }
}

3. 在AppModule里声明这个指令：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GlobalScrollbarDirective } from './global-scrollbar.directive';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    GlobalScrollbarDirective // 注册全局指令
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. 最后还需要覆盖ngx-perfect-scrollbar的默认样式，实现透明、hover显示的效果，在全局样式文件里加：

/* 隐藏默认的滚动条轨道 */
.ps__rail-x, .ps__rail-y {
  background: transparent !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease;
}

/* 容器hover时显示滚动条轨道 */
.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y {
  opacity: 1 !important;
}

/* 滚动条滑块默认透明 */
.ps__thumb-x, .ps__thumb-y {
  background: rgba(140,140,140,0) !important;
  border-radius: 3px !important;
  transition: background 0.2s ease;
}

/* 滑块hover时显示半透明 */
.ps__thumb-x:hover, .ps__thumb-y:hover {
  background: rgba(140,140,140,0.6) !important;
}

/* 容器hover时滑块显示浅透明 */
.ps:hover > .ps__rail-x > .ps__thumb-x,
.ps:hover > .ps__rail-y > .ps__thumb-y {
  background: rgba(140,140,140,0.4) !important;
}

这个方案的优势是能在所有浏览器实现一致的效果，但需要写一点Angular指令代码，对于新手来说稍微复杂一点。

如果你追求简单快捷，优先选纯CSS方案，零依赖、不用改HTML，大部分场景都能满足；如果需要跨浏览器完全一致的效果，再考虑用ngx-perfect-scrollbar配合全局指令的方案。

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