原生滚动条无法一键全局修改，需按内核分写：Chrome/Edge用::-webkit-scrollbar系列伪元素（须成套、限定容器、设宽高及背景），Firefox仅支持scrollbar-width和scrollbar-color，Safari支持极不稳定，跨浏览器统一需JS库。
原生滚动条样式不能“一键全局修改”，必须按浏览器内核分写：Chrome/Edge 用 ::-webkit-scrollbar 系列伪元素，Firefox 只认 scrollbar-width 和 scrollbar-color，Safari 基本不可控——想一套代码打遍天下，行不通。
Chrome/Edge 中怎么用 ::-webkit-scrollbar 控制滚动条
这不是加几个 CSS 属性就能生效的事，关键在“成套出现”和“容器限定”。漏掉 ::-webkit-scrollbar-track 或 ::-webkit-scrollbar-thumb，样式大概率回退到默认；直接写在 html 或 body 上，会污染全站滚动条。
-
::-webkit-scrollbar必须设width（垂直）或height（水平），否则整个自定义链失效；常见值是8px～12px -
::-webkit-scrollbar-track建议配background+border-radius，但别设box-shadow——它不渲染 -
::-webkit-scrollbar-thumb的background是刚需，不设就是透明；border-radius别超过宽高一半，比如滑块高6px，border-radius: 4px就会视觉错位 - 悬停效果只能靠
::-webkit-scrollbar-thumb:hover单独写，:hover伪类对父容器不起作用
Firefox 怎么设置 scrollbar-width 和 scrollbar-color
Firefox 完全无视 ::-webkit- 开头的所有东西，只接受两个属性，且只作用于有 overflow 的块级元素（比如 .list-container），不能写在 html 根上。
-
scrollbar-width只有三个值：auto（系统默认）、thin（窄一点）、none（隐藏）；没有像素级宽度控制 -
scrollbar-color格式固定为scrollbar-color: <thumb> <track>，顺序反了就无效；第二个参数设transparent会导致轨道“消失”，但滑块仍可拖——体验极差，别这么干 - 这两个属性不支持圆角、阴影、渐变，也不响应
:hover；所谓“定制”，仅限颜色和粗细两级
为什么 Safari 上滚动条经常“没反应”
Safari（WebKit 内核）虽然识别 ::-webkit-scrollbar，但支持度极不稳定：iOS Safari 16.4+ 才开始有限支持，macOS Safari 对 ::-webkit-scrollbar-corner 和 ::-webkit-scrollbar-button 基本忽略，且不支持 transition 动画。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 不要给 Safari 写
::-webkit-scrollbar-thumb:active——它不触发 - 避免依赖
scrollbar-width: thin在 Safari 上生效，实测多数版本直接当auto处理 - 如果设计稿强制要求圆角+悬停变色+Safari 正常显示，唯一可靠路径是 JS 滚动条库（如
simplebar），用绝对定位重绘滚动条
怎么让自定义滚动条只作用于某个 div 容器
把所有 ::-webkit-scrollbar 规则都挂到容器 class 后面，同时确保该容器有明确的 overflow 设置，否则伪元素根本不会被创建。
- HTML 结构必须是：带
class="scrollable"的容器 → 内部内容溢出 → 触发overflow-y: auto - CSS 写法必须是：
.scrollable::-webkit-scrollbar { width: 10px; }，不能写成.scrollable ::-webkit-scrollbar（中间多空格就失效） - Firefox 部分要同步加在同一个选择器下：
.scrollable { scrollbar-width: thin; scrollbar-color: #6c5ce7 #f0f0f0; } - 别忘了测试内容刚好填满容器高度时的行为——此时滚动条应自动隐藏，
auto值才真正起效
最易被忽略的一点：所有伪元素样式都依赖“内容真实溢出”。开发时若用占位文本（如 <p>lorem ipsum</p>）没撑开高度，滚动条根本不出现，样式自然无从验证。上线前务必用真实数据或足够长的内容做压测。
