scrollbar-gutter: stable both-edges 是目前唯一能真正稳住盒模型宽度的 CSS 方案，它强制浏览器提前预留滚动条空间，避免内容宽度跳变，需作用于 html 或实际滚动容器，且仅在 overflow: auto/scroll 下生效。
直接用 scrollbar-gutter: stable both-edges，作用在 html 或滚动容器上，是目前唯一能真正稳住盒模型宽度的 CSS 方案。
为什么 scrollbar-gutter: stable 能阻止宽度跳变
浏览器默认在 overflow: auto 下“按需占位”：没滚动条时 content-box 宽度全开，一出现就硬抠走约 16px。而 scrollbar-gutter: stable 强制它提前算好这个缺口，把滚动条槽当成 padding 一样纳入布局计算——不是隐藏、不是覆盖、不依赖 JS，就是让盒子“从一开始就知道自己要留多大缝”。
必须搭配 both-edges（规范强制要求），哪怕你只用右侧滚动条；只写 stable 在 Chromium/Firefox/Safari 新版本里会被忽略。
-
scrollbar-gutter不改变滚动行为，只修正布局时机 - 它对
overflow: hidden或visible无效，只在auto或scroll下起作用 - 写在普通
div上可以，但必须是实际发生滚动的容器（比如设置了max-height+overflow-y: auto的那个元素）
必须写在哪？html 还是 body 还是具体容器
优先写在 html 元素上，因为它是整个视口滚动的根容器。写 body 也行，但要注意：如果 body 没设 height: 100% 或 min-height: 100vh，它的高度可能撑不满视口，导致 scrollbar-gutter 不生效。
立即学习“前端免费学习笔记（深入）”；
局部容器（如弹窗、表格、侧边栏）则直接写在该元素上，例如：
.data-table {
max-height: 400px;
overflow-y: auto;
scrollbar-gutter: stable both-edges;
}- 不要写在
html和body同时写，避免冗余或冲突 - 若容器有
box-sizing: border-box，padding-right降级方案才不会额外溢出 - 移动端（
@media (hover: none)）建议移除scrollbar-gutter或改用overflow: overlay（仅 Safari 仍支持）
老浏览器怎么兜底
scrollbar-gutter 在 Chromium 120+ / Firefox 111+ / Safari 17.4+ 才支持。降级不能靠 scrollbar-width: none，它只藏 UI，不放空间；也不能用 JS 动态测宽再设 padding，会触发重排且不准。
最简可靠的兜底是：
body {
padding-right: calc(100vw - 100%);
}这个表达式自动算出滚动条宽度（视口宽减文档宽），且只在需要时生效。注意两点：
- 它依赖
body是块级、非position: fixed等异常定位 - 若页面有横向滚动，
100vw可能包含竖向滚动条宽度，结果略偏大，但视觉影响远小于抖动 - 配合
html { overflow-y: scroll }可进一步消除降级时的突变
容易被忽略的兼容性细节
很多人试了 scrollbar-gutter 发现没效果，问题常出在三个地方：
- 用了
overflow: overlay—— 这个值已被 Chromium/Firefox 废弃，写了等于没写，还干扰scrollbar-gutter生效 - 写了
scrollbar-width: thin或none就以为能省空间 —— 它们完全不影响占位逻辑，纯属视觉控制 - 在开发阶段没开
html { overflow-y: scroll }调试，导致抖动只在内容动态加载时才暴露，难复现
真正关键的是：是否需要跨浏览器一致的布局稳定性。如果是，scrollbar-gutter: stable both-edges 必须作为第一道防线，降级逻辑得提前写进 CSS，而不是等用户打开老浏览器才发现页面在晃。
