能改，但必须分浏览器处理：WebKit系用伪元素精细控制，Firefox仅支持scrollbar-width和scrollbar-color两个属性，不加兼容写法则显示默认滚动条。
直接说结论：能改，但必须分浏览器处理；WebKit系（Chrome/Safari/Edge）靠伪元素精细控制，Firefox只能用两个标准化属性打底；不加兼容写法，Firefox用户看到的还是默认滚动条。
为什么::-webkit-scrollbar在Firefox里完全失效
因为它是 WebKit/Blink 内核私有伪元素，Firefox 从不解析 ::-webkit-scrollbar 及其任何子项。你写一堆 ::-webkit-scrollbar-thumb:hover 样式，Firefox 直接忽略——不是报错，是静默跳过。这不是 bug，是规范差异。
- Firefox 只认
scrollbar-width和scrollbar-color这两个 CSS 属性 -
scrollbar-width: thin是唯一能缩小滚动条宽度的方式，none会隐藏但保留滚动能力 -
scrollbar-color只接受两个值：thumb-color track-color，顺序不能反，也不支持渐变或透明度 - 别试图给 Firefox 加
border-radius或transition——它根本不暴露这些可样式化节点
::-webkit-scrollbar各部分作用和常见误配
很多人以为设了 ::-webkit-scrollbar 就万事大吉，结果滑块拖不动、轨道颜色不对、水平滚动条没反应——问题基本出在部件混淆或尺寸错配。
-
::-webkit-scrollbar控制整体容器尺寸：width影响垂直条宽度，height影响水平条高度（仅当overflow-x: auto触发时生效） -
::-webkit-scrollbar-track是滑块背后的“底板”，不是整个背景；如果设了background: transparent又没给父容器配色，轨道会透出页面底色 -
::-webkit-scrollbar-thumb必须有足够对比度，否则在浅色轨道上几乎不可见；建议最小宽度设为6px，低于此值在高缩放比下可能消失 -
::-webkit-scrollbar-corner只在同时存在垂直+水平滚动条时出现，常被误认为“右下角多余白块”，其实设background: transparent就能消除
如何让自定义滚动条在真实项目中不翻车
实际部署时最容易崩的是动态内容加载后滚动条消失、暗黑模式下颜色反白、或者表格组件里样式被覆盖。核心是三点：作用域收敛、状态兜底、尺寸保守。
立即学习“前端免费学习笔记（深入）”；
- 不要只写
body { scrollbar-color: #666 #eee; }，而要加html, body { min-height: 100%; }，否则某些 SPA 路由切换后html高度塌陷，滚动条样式丢失 - 局部滚动容器（如
.table-wrapper）必须单独写一遍::-webkit-scrollbar规则，全局规则不会继承到 overflow 容器内部 - 暗黑模式下，用
@media (prefers-color-scheme: dark)重置scrollbar-color，别依赖 CSS 变量自动换色——Firefox 不支持变量注入到该属性 - 避免用
width: 0隐藏垂直滚动条来“强制只留水平条”，这会导致 Safari 下水平滚动失灵；正确做法是设::-webkit-scrollbar { width: 0; height: 8px; }
最麻烦的点其实是「没有统一 DOM 节点」——滚动条不是页面元素，无法用 JS 监听尺寸变化，也无法用 getComputedStyle 读取当前样式。你调得再细，只要浏览器内核一更新（比如 Chrome 某次版本悄悄调整了 thumb 最小可渲染尺寸），就可能突然变细到看不见。所以所有自定义滚动条方案，本质都是在浏览器允许的边界内做有限雕刻。
