<p>scrollbar-gutter: stable both-edges 是解决滚动条侵占内容宽度导致布局抖动的唯一标准解法，它强制浏览器预留滚动条空间；需作用于 html/body，Chromium 120+/Firefox 111+/Safari 17.4+ 支持，降级推荐 body { padding-right: calc(100vw - 100%); }。</p>
滚动条会真实侵占内容区域宽度，这不是 bug，是盒模型的默认行为——只要用了 overflow: auto 或 overflow: scroll，且浏览器渲染的是 classic scrollbar（Windows / Linux / 旧 macOS），它就会从 content-box 里“抠走”约 16–17px，导致所有依赖精确宽度的布局抖动。
scrollbar-gutter: stable 为什么能稳住宽度
这个属性告诉浏览器：“不管滚动条实际显不显示，都按它存在来分配空间”。它不改变滚动逻辑，只修正布局计算时机。
- 必须作用于滚动容器本身，通常是
html或body；写在普通div上无效 - 值必须是
stable both-edges（规范要求双侧对称，尽管实际只用右侧） - 仅在
overflow: auto或overflow: scroll下生效；overflow: hidden或visible会忽略它 - Chromium 120+（Chrome 120 / Edge 120 起）、Firefox 111+、Safari 17.4+ 已支持；老版本需降级
不支持 scrollbar-gutter 时怎么兜底
不能靠 scrollbar-width，它只控制视觉样式，不影响占位；也不能用 JS 测量 clientWidth - offsetWidth 动态设 padding——既不准又触发重排。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 推荐降级方案：
body { padding-right: calc(100vw - 100%); }，利用视口与文档宽度差自动得出滚动条宽度 - 若容器有固定高度或
max-height，记得加box-sizing: border-box，否则 padding 可能引发额外溢出 - 触屏设备（如 iPad、Android Chrome）可结合
@media (hover: none)移除 padding，因为它们通常用 overlay scrollbar，不占空间
常见误用：scrollbar-width 和 overflow 的混淆
很多人以为 scrollbar-width: none 能解决抖动，其实它只是隐藏 UI，内容区依然被压缩——因为占位逻辑没变。
立即学习“前端免费学习笔记（深入）”；
-
scrollbar-width: none+overflow: auto= “隐形可滚”，但布局仍抖 -
overflow: hidden确实不抖，但内容被裁剪、不可滚动，和 scrollbar-width 无关 -
overflow: overlay曾是旧解法，但已被 Chromium/Firefox 废弃，现在写上也无效
真正关键的判断点在于：你是否需要跨浏览器一致的布局稳定性。如果是，scrollbar-gutter: stable both-edges 是目前唯一标准解法；降级逻辑必须提前写好，不能等用户用老浏览器打开才暴露问题。
