Chrome和Edge中用::-webkit-scrollbar自定义滚动条仅限Chromium内核浏览器，需组合使用track和thumb伪元素；Firefox仅支持scrollbar-width和scrollbar-color两个属性调色；body上设置常失效，应优先作用于html元素。
Chrome 和 Edge 中如何用 ::-webkit-scrollbar 自定义滚动条
只在基于 Chromium 的浏览器（Chrome、Edge、新版 Opera）中生效，Firefox 和 Safari 不支持。这是目前最常用、最可控的方式，但必须清楚它的作用域限制。
关键点是：它是一组伪元素组合，不能单独写 ::-webkit-scrollbar 就完事，至少要配 ::-webkit-scrollbar-track 和 ::-webkit-scrollbar-thumb 才能看见效果。
-
::-webkit-scrollbar控制整体宽度/高度（横向滚动条用height，纵向用width） -
::-webkit-scrollbar-track是滚动轨道背景，建议设background-color，不设可能透出父容器底色 -
::-webkit-scrollbar-thumb是拖拽滑块，必须设background-color或border-radius，否则默认不可见 - 可选加
::-webkit-scrollbar-thumb:hover做悬停反馈，但注意移动端无 hover
示例：
/* 纵向滚动条宽 8px */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a0a0a0; }Firefox 中能否自定义滚动条？scrollbar-width 和 scrollbar-color 能做什么
Firefox 只支持两个 CSS 属性，能力非常有限：不能改宽度、不能加圆角、不能设阴影，仅能调颜色。
立即学习“前端免费学习笔记（深入）”；
scrollbar-width 只接受 auto、thin、none 三个值；scrollbar-color 接收两个颜色值，顺序是 thumb track。
- 必须写在根元素（
:root或html）上才全局生效，局部容器无效 -
scrollbar-width: thin在 Firefox 97+ 才支持，旧版本会回退到auto - 若同时写了 WebKit 和 Firefox 规则，浏览器各自按规则解析，不会冲突
示例：
:root {
scrollbar-width: thin;
scrollbar-color: #888 #f5f5f5;
}为什么给 body 加自定义滚动条经常失效？
因为 body 默认不是滚动容器——真正滚动的是 document.documentElement（即 html 元素）。多数情况下，对 body 设置 ::-webkit-scrollbar 没用。
- 应优先对
html写样式，尤其全页滚动场景 - 若只希望某个
div有自定义滚动条，需确保它有明确的height或max-height+overflow: auto，再对其写伪元素 - 某些重置 CSS（如 normalize.css）会设
html { overflow-y: scroll; }，影响实际滚动层，需检查 computed styles - 使用
overscroll-behavior可防止滚动穿透，但它和滚动条样式无关，别混淆
要不要用 JavaScript 模拟滚动条？哪些场景真需要
纯 CSS 方案在 Chrome/Edge/Firefox 上已覆盖大部分需求，JS 模拟（如 simplebar、perfect-scrollbar）只在以下情况值得引入：
- 必须统一 Safari 和 Firefox 的滚动条外观（Safari 完全不支持任何 CSS 自定义）
- 需要监听滚动 thumb 拖拽过程、做实时位置同步（比如配合虚拟滚动）
- 设计要求滚动条始终显示（CSS 方案中
scrollbar-width: thin仍会隐藏，而 JS 方案可强制常驻） - 项目已用 Web Components 或 Shadow DOM，WebKit 伪元素在 shadow root 中不生效
代价也很明显：增加 bundle 体积、额外事件绑定、可能干扰原生滚动性能、键盘导航（PageUp/PageDown）支持需手动补全。
真正卡住的点往往不是“怎么做得更像”，而是“要不要脱离原生滚动机制”——一旦用 JS 模拟，就等于放弃惯性滚动、平滑滚动（scroll-behavior: smooth）、以及系统级缩放适配。
