富文本编辑器滚动条样式必须绑定到实际滚动的父容器而非contenteditable元素本身，因后者不触发滚动上下文；需确保该容器有固定高度、overflow-y: auto且内容真实溢出，并为webkit和firefox分别设置::-webkit-scrollbar系列和scrollbar-width/scrollbar-color。
富文本编辑器（如 contenteditable 区域）的滚动条不能靠全局样式或随便挂伪元素生效，必须绑定到它实际滚动的容器上——而这个容器往往不是你直觉认为的那个 div。
为什么给 contenteditable 元素直接写 ::-webkit-scrollbar 没反应
常见错误是这样写：
div[contenteditable]::-webkit-scrollbar { width: 8px; }
但多数情况下完全无效。原因有三：
-
contenteditable元素本身不产生滚动，真正滚动的是它的「内容框」（即浏览器内部渲染层），而该层不可被 CSS 选择器直接命中 - 若未显式设置
overflow-y: auto且内容真实溢出，::-webkit-scrollbar根本不会触发 - 某些编辑器（如 Quill、Tiptap）会把编辑区域包裹在多层
div中，自定义样式必须落在最外层带overflow的容器上，而不是contenteditable本身
正确绑定滚动条样式的容器位置
你需要定位到「实际承载滚动行为的块级容器」。通常满足以下条件之一：
- 该容器有固定
height或max-height - 设置了
overflow-y: auto或scroll，且子内容高度 > 容器高度 - 它是
contenteditable元素的**父级**，而非它自己（除非你确认该元素自身设了 overflow）
示例结构：
<div class="editor-wrapper" style="height: 400px; overflow-y: auto;"> <div contenteditable="true" class="editor-content"></div> </div>
此时样式必须写在 .editor-wrapper 上：
.editor-wrapper::-webkit-scrollbar { width: 8px; }
.editor-wrapper::-webkit-scrollbar-track { background: #f5f5f5; }
.editor-wrapper::-webkit-scrollbar-thumb { background: #c0c0c0; border-radius: 4px; }
Firefox 兼容：别漏掉 scrollbar-width 和 scrollbar-color
Firefox 完全无视 ::-webkit-scrollbar，只认这两个属性，且**只对设置了 overflow 的块级元素生效**（不能写在 contenteditable 上，也不能写在 body 上除非你真让它滚动）。
-
scrollbar-width必须设为thin或auto，设thick会被忽略 -
scrollbar-color格式严格：scrollbar-color: <thumb><track></track></thumb>，顺序反了或值为空，整个声明失效 - 必须和
overflow-y: auto同时出现在同一个容器上才起作用
补全上面的例子：
.editor-wrapper {
height: 400px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #c0c0c0 #f5f5f5;
}
移动端与 Safari 的现实约束
在 iOS Safari 和大多数 Android 浏览器中，即使你写了完整样式，滚动条也大概率只在用户长按拖动时短暂出现，且宽度/颜色不可控。
- 不要试图用
overflow: overlay（已废弃，Chrome 90+ 不再支持） - 避免依赖
::-webkit-scrollbar-button—— 移动端根本没按钮 - 如果编辑器需在移动端高频使用，建议接受系统默认滚动条；定制重点放在桌面端即可
- macOS Safari 对
overscroll-behavior: contain敏感，加了可能禁用回弹手势，要实测
真正容易被忽略的是：滚动条样式是否生效，和编辑器是否“实时响应输入”无关，只取决于容器是否满足「固定尺寸 + 真实溢出 + overflow 显式开启」这三个硬条件。少一个，就退回系统默认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
