scrollbar-width 不影响盒模型尺寸，仅控制滚动条视觉显示；Firefox 默认预留滚动条空间，需通过 scrollbar-gutter、JS 测量或 padding 等方案规避重排。
scrollbar-width 在 Firefox 中是否影响盒模型尺寸
不占用。设置 scrollbar-width（如 thin 或 none）仅控制滚动条的视觉宽度或是否显示，**不会改变元素的 content-box、padding-box 或 border-box 尺寸**。Firefox 仍会为滚动条预留空间（即“滚动条占位”行为默认开启），除非配合 overflow 和容器尺寸策略主动规避。
如何让 Firefox 滚动条不挤占内容宽度
关键不是靠 scrollbar-width，而是用 overflow: overlay（已废弃但部分 Firefox 仍支持）或更可靠的现代方案：
-
overflow: auto+ 固定宽度容器 +padding-right预留滚动条宽度（需 JS 检测scrollbarWidth动态设置） - 使用
scrollbar-gutter: stable both-edges（Chrome/Edge/Safari 支持，Firefox 111+ 支持）：强制保留滚动条槽位，避免内容随滚动条出现/消失而重排 - 完全隐藏滚动条但保留滚动能力：
scrollbar-width: none+overflow: auto+::-moz-scrollbar { width: 0 }（注意：此时滚动仍有效，但视觉上无滚动条，用户可能不知可滚）
为什么 scrollbar-width: none 不等于 overflow: hidden
这是最容易混淆的点：scrollbar-width: none 仅告诉 Firefox “不要渲染滚动条”，但溢出内容依然存在，overflow 属性决定是否可滚动——
- 若
overflow: auto或scroll，内容仍可滚动，只是没滚动条 UI - 若
overflow: hidden，内容被裁剪且不可滚动，和scrollbar-width无关 - 所以
scrollbar-width: none+overflow: auto是“隐形滚动”的常见组合，但对可访问性不友好（键盘 Tab 或屏幕阅读器可能失效）
跨浏览器统一处理滚动条占位的实际建议
没有纯 CSS 的银弹，必须结合场景取舍：
立即学习“前端免费学习笔记（深入）”；
- 若需稳定布局（如表格列对齐）：优先用
scrollbar-gutter: stable both-edges，降级到 JS 测量document.documentElement.clientWidth - document.documentElement.offsetWidth得滚动条宽度，再设padding-right - 若仅美化滚动条：WebKit 用
::-webkit-scrollbar，Firefox 用scrollbar-width+scrollbar-color，二者互不影响盒模型 - 切勿依赖
scrollbar-width: thin来“省空间”——它在多数 Firefox 版本中实际表现和auto一致，且不改变占位逻辑
真正影响盒模型的是 overflow 行为和浏览器是否启用“滚动条占位”，而不是 scrollbar-width 的值本身。
