用scrollbar-width和scrollbar-color控制Firefox滚动条，WebKit下用响应式单位（如1.2vw）配合min/max-width定制::-webkit-scrollbar，并避免transform触发层叠上下文导致错位。
fixed弹窗里滚动条太粗或错位，怎么用CSS精准控制？
直接给 .modal-content 加 overflow-y: auto 不够——滚动条宽度会随系统、缩放、窗口尺寸乱变，还容易和弹窗边框打架。关键不是“加滚动”，而是“重置滚动条的视觉表现和布局行为”。
用 scrollbar-width 和 scrollbar-color 快速降级适配 Firefox
Firefox 支持原生属性，比伪元素更轻量、更稳定：
-
scrollbar-width: thin或scrollbar-width: none—— 仅影响宽度，不触发重排 -
scrollbar-color: #666 #f0f0f0—— 前者是滑块色，后者是轨道色，顺序不能反 - 它只作用于该元素及其子树，不会污染全局，也不需要
::-webkit-scrollbar那套冗长规则 - 注意：Safari 和旧版 Chrome 完全忽略这两个属性，必须搭配 WebKit 方案兜底
WebKit 下用 ::-webkit-scrollbar 精确控制尺寸与定位
Chrome/Safari/Edge 的滚动条必须靠伪元素定制，但常见错误是写死 width: 8px 导致缩放失真或窄屏消失：
- 用响应式单位打底：
width: 1.2vw（抗缩放） +min-width: 8px+max-width: 14px - 避免用
vh控制宽度——语义错误且垂直拉伸窗口时会爆炸 - 给
::-webkit-scrollbar-track加border-radius: 4px，再设background-clip: padding-box防止圆角溢出 - 若弹窗右侧有固定按钮（如关闭叉），滚动条右边缘需留出安全间距：
margin-right: 8px（不能靠padding-right，它会影响可滚动区域宽度）
fixed 弹窗内滚动条突然“顶到顶部”或“错位”，检查父容器是否触发了层叠上下文
当弹窗内容区用了 transform、will-change 或 filter，浏览器会创建新层叠上下文，导致 ::-webkit-scrollbar 的定位基准偏移，表现为滚动条悬浮、截断或不随内容滚动：
立即学习“前端免费学习笔记（深入）”；
- 临时移除
transform: translateZ(0)类样式，确认是否复现 - 优先用
contain: layout style paint替代transform触发硬件加速 - 如果必须用
transform，把滚动容器（如.modal-body）单独提一层 DOM，确保它不被父级transform包裹 - 检查
el-table或ant-design这类组件是否在内部又套了一层position: relative容器——它可能截断了滚动条的渲染层级
最常被忽略的一点：滚动条宽度不是纯视觉问题，它直接影响 padding-right 补偿逻辑和 fixed 元素的 right 偏移计算。一旦你在弹窗里动了 scrollbar-width 或自定义了 ::-webkit-scrollbar，就必须同步校准所有依赖滚动条宽度的 CSS 计算，否则 fixed 按钮会被“吃掉”一截。
