要只美化特定容器（如.scroll-box）的滚动条，需将::-webkit-scrollbar系列伪元素与该容器选择器联用，如.scroll-box::-webkit-scrollbar；firefox不支持该伪元素，须额外添加scrollbar-width和scrollbar-color属性适配。
用 ::-webkit-scrollbar 选择器只作用于特定容器
浏览器原生滚动条样式只能通过 WebKit 伪元素控制，且默认全局生效。想只改某个模块（比如 <div class="scroll-box">），必须把伪元素写在该容器的后代选择器里，而不是直接写 <code>html 或 body 下。
关键点是：伪元素本身不继承，但它的作用范围由宿主选择器决定。所以得这样写：
`.scroll-box {
overflow-y: auto;
height: 200px;
}
<p>.scroll-box::-webkit-scrollbar {
width: 8px;
}</p><p>.scroll-box::-webkit-scrollbar-track {
background: #f1f1f1;
}</p><p>.scroll-box::-webkit-scrollbar-thumb {
background: #888;
}</p>
如果写成 div::-webkit-scrollbar，那所有 <div> 都会变——不是你想要的“单独”。<h3>Firefox 不支持 <code>::-webkit-scrollbar，得用 scrollbar-width 和 scrollbar-color
Firefox 从 64+ 开始支持两个 CSS 属性，但仅限于根元素（html）或有滚动行为的块级容器（如设置了 overflow 的 <div>）。它不支持伪元素，也不支持嵌套选择器细化作用域。<p>所以对同一个 <code>.scroll-box，得补上：
`.scroll-box {
scrollbar-width: thin; /* auto / thin / none */
scrollbar-color: #888 #f1f1f1; /* thumb track */
}`
注意：scrollbar-width: thin 在 Firefox 中只是建议，实际宽度仍可能受系统设置影响；scrollbar-color 则严格生效。
常见错误：只写 WebKit 样式，结果在 Firefox 里滚条还是默认粗灰样式，用户第一反应是“样式没生效”，其实是根本没适配。
避免影响子容器滚动条的嵌套陷阱
如果 .scroll-box 里面还有另一个可滚动区域（比如内部 <table> 或 <code><pre class="brush:php;toolbar:false;"></pre>），它的滚动条也会被上面的 .scroll-box::-webkit-scrollbar 规则命中——因为伪元素选择器匹配的是“该容器内出现的滚动条”，不是“该容器自身的滚动条”。
解决方法只有两个：
- 给子容器单独重置样式，例如：
.scroll-box .inner-scroll::-webkit-scrollbar { width: 4px; } - 或者让子容器不产生独立滚动（如用
max-height: none+ 弹性布局撑开）
更隐蔽的问题：某些 UI 库（如 Ant Design 的 Table）内部用了 overflow: auto，会悄悄触发外层滚动条样式，导致整页滚条风格不一致。
移动端 Safari 和 iOS WebView 的兼容性现实
iOS 16.4+ 才开始部分支持 ::-webkit-scrollbar，且仅限于 overflow: scroll + -webkit-overflow-scrolling: touch 组合（后者已废弃但仍有影响）。iOS 15 及更早版本完全忽略这些样式，滚条永远是系统原生半透明样式，无法隐藏或着色。
这意味着：
- 别在 iOS 上尝试做「细线+圆角+渐变」类精致滚条，大概率白写
- 如果业务强依赖定制滚动体验（比如阅读类 App），得降级为 JS 滚动库（如
simplebar或overlay-scrollbars），但要注意 touch 事件穿透和性能损耗
最常被忽略的一点：开发时在 Chrome 桌面调得再好，不真机连 Safari 调一次，就等于没测。
