滚动条 Scrollbar

参考 Claude 桌面端风格的极简滚动条 —— 6px 宽、半透明 thumb、hover 加深、track 透明（overlay 不占 layout）。

注意 Figma scrollbar (15443:35156) 的设计 Evan 自评不够好，v2 这里换成 Claude 桌面端风格作为基准。

实施方式

Scrollbar 是 CSS pseudo-element（::-webkit-scrollbar + scrollbar-color），不是 DOM element，所以 不封装 Vue 组件，而是提供：

1. .mc-scrollbar utility class — opt-in，加在任意 overflow: auto 容器上
2. 全局 html / body 覆盖 — v2 文档站本身的 scrollbar 也走这个风格（保持视觉连贯）

<!-- opt-in 用法 -->
<div class="mc-scrollbar" style="overflow: auto; height: 200px">
  <p>很长的内容…</p>
</div>

视觉预览

第 1 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 2 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 3 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 4 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 5 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 6 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 7 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 8 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 9 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 10 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 11 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 12 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 13 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 14 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 15 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 16 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 17 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 18 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 19 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 20 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 21 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 22 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 23 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 24 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 25 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 26 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 27 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 28 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 29 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

第 30 行 — 这是一段足够长的内容用来撑出滚动条。Scroll me ↓

视觉参数

项	值
宽度 (::-webkit-scrollbar)	6px
Track	透明
Thumb 默认	rgba(255, 255, 255, 0.15) (dark) / rgba(0, 0, 0, 0.2) (light)
Thumb hover	rgba(255, 255, 255, 0.25) (dark) / rgba(0, 0, 0, 0.32) (light)
圆角	6px（胶囊形）
Firefox	scrollbar-width: thin + scrollbar-color: thumb track

浏览器兼容

浏览器	支持
Chrome / Edge / Safari / Electron (含 Claude Desktop)	✅ ::-webkit-scrollbar 完整
Firefox	✅ scrollbar-width + scrollbar-color（无 pseudo-element 但视觉一致）
IE 11	❌ 退化为原生

路线图

• v1 ✅ .mc-scrollbar utility + 全局覆盖
• v1.1 ⏳ 默认 hidden / 滚动时浮现的进阶交互（macOS 原生行为模拟）
• v1.2 ⏳ 自定义 thumb 颜色 prop（暗背景上的反色 token）