直接改::-webkit-scrollbar无效，是因为它必须作用于实际触发滚动的容器（如设overflow:auto且内容溢出的div），而非body/html；firefox仅支持scrollbar-width和scrollbar-color，ios safari完全不支持任何滚动条样式定制。
直接改 ::-webkit-scrollbar 无效，是因为你没把它绑到实际滚动的容器上，而且 Firefox 和 iOS 完全不认这套。
为什么给 body 或 html 写 ::-webkit-scrollbar 没反应
浏览器只对「内容真正溢出 + 显式设置了 overflow」的块级元素应用该伪类。写在 :root、html 或 body 上，等于白写——它不继承、不全局生效。
- 必须定位到具体滚动容器，比如
.editor-content、.monaco-editor .view-line或你封装的编辑器外层div - 该容器需有明确尺寸和
overflow: auto/scroll，且内容确实超出（空内容或height: fit-content不触发） - 漏掉
::-webkit-scrollbar-track或::-webkit-scrollbar-thumb中任意一个，整个自定义会回退到系统默认样式
::-webkit-scrollbar 的宽高逻辑容易搞反
垂直滚动条用 width 控制粗细，水平滚动条用 height 控制“厚度”——这不是笔误，是 WebKit 的硬性规则。
-
::-webkit-scrollbar { width: 8px; height: 6px; }：垂直条宽 8px，水平条厚 6px - 设
width: 0可隐藏垂直滚动条；设height: 0可隐藏水平滚动条（但内容仍可拖） -
border-radius在::-webkit-scrollbar-thumb上不能超过height / 2（比如height: 6px时，border-radius: 4px会被截断） -
::-webkit-scrollbar-track必须显式设background，否则深色背景下直接“消失”
Firefox 怎么适配？别写 ::-moz-scrollbar
::-moz-scrollbar 是废弃写法，写了也白写。Firefox 当前只支持两个属性，且只在根滚动容器（html 或带 overflow 的块级元素）上生效。
- 必须写成
html { scrollbar-width: thin; scrollbar-color: #6c5ce7 #f0f0f0; }，写在子容器里完全无效 -
scrollbar-width只接受auto、thin、none；其他值如small或数字会被忽略 -
scrollbar-color顺序不能反：scrollbar-color: <thumb><track></track></thumb>，第二个是轨道色；设成transparent会导致轨道不可见但滑块仍可拖 - 这两个属性不响应
@media (prefers-color-scheme: dark)，深色模式要手动重复整套规则
iOS Safari 和 macOS Safari 的现实约束
无论你怎么写 ::-webkit-scrollbar 或 scrollbar-color，iOS/iPadOS Safari 都会当没看见——苹果明确不支持滚动条样式定制。
- macOS Safari 16.4+ 才开始支持
scrollbar-width和scrollbar-color，但仍不支持::-webkit-scrollbar - 如果用户系统偏好中开启了“自动隐藏滚动条”，CSS 设置会被系统策略覆盖，网页无权干预
- 若编辑器强依赖水平滚动（如代码时间轴、宽表格），建议加
overflow-x: scroll+ 已废弃但仍有惯性效果的-webkit-overflow-scrolling: touch - 真要统一外观，JS 库如
simplebar是唯一解，但它会接管原生滚动逻辑，可能影响性能和可访问性
最常被忽略的一点：移动端用户几乎不看滚动条，手势拖拽才是主要交互方式。优先保障内容可滚动、惯性自然，比强行统一视觉更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
