CSS scrollbar-gutter 怎么避免弹窗打开页面抖动：stable、both-edges 与降级验收

后台列表打开筛选弹窗时，最容易被忽略的细节往往不是弹窗本身，而是页面右侧的滚动条：弹窗弹出后通常要锁住页面滚动，原生滚动条会直接消失，整页内容就突然往右窜一截，关掉弹窗又立刻挪回去，体验特别别扭。CSS scrollbar-gutter 可以提前把这部分滚动条占用的空间预留出来，不管弹窗打开还是关闭，主内容都能保持同一条横向基线，不会来回晃。

先确认抖动来自滚动条，而不是弹窗宽度

别急着上来就给弹窗硬加负边距凑空间，先开浏览器开发者工具对比两个状态：页面正常可滚动时主内容的右边界在哪，弹窗打开页面被禁止滚动之后，页面里的标题、表格元素是不是整体偏移了。如果只有经典滚动条出现和消失的瞬间发生位移，那问题就出在滚动条占用的横向inline空间上。

可以在测试页给主内容容器加一条醒目的边框线，反复执行打开弹窗、关闭弹窗的操作。如果这条边框线跟着页面内容一起左右移动，弹窗本身也没重新计算过宽度，那优先处理滚动条的占位问题，比改其他逻辑效率高得多。

用 stable 预留滚动条位置

改动最小的方案是把预留规则写在真正产生滚动的页面容器上。针对整页滚动的场景，可以从 html 开始配置：

html {
  scrollbar-gutter: stable;
}

body.modal-open {
  overflow: hidden;
}

stable 作用不是强制页面一直显示滚动条，而是在经典滚动条模式下，哪怕当前页面内容还没溢出，也提前把滚动条要用到的槽位留出来。这样触发弹窗、执行 body.modal-open 暂停页面滚动时，主内容的可用宽度不会突然变大，也就不会出现横向位移。

如果你的项目没有用整页滚动，而是把滚动逻辑放在自定义的 .page-shell 容器里，直接把这个属性加在这个滚动盒上就行，不要写在根本不会发生滚动的外层容器上：

.page-shell {
  min-height: 100vh;
  overflow: auto;
  scrollbar-gutter: stable;
}

什么时候需要 both-edges

单边预留空间确实能解决宽度变化的问题，但如果你的页面是居中排布的窄内容区，预留的空间只出现在滚动条所在的右侧，视觉上的中心点还是会有细微偏移。这种场景下可以试试另一个取值：

.page-shell {
  overflow: auto;
  scrollbar-gutter: stable both-edges;
}

both-edges 会在滚动条对侧的空白区域补上同等宽度的预留空间，让内容区左右两侧的留白始终保持对称。它更适配固定宽度的阅读页、数据表外壳、需要严格居中的后台工作台这类布局；如果你的页面本来就是靠左排版的，贸然启用这个属性反而会在左侧多出一块没必要的空白，得不偿失。

经典滚动条与 overlay 模式要分开验收

不要把“页面上能看到滚动条”当成验收成功的标准。至少要盯着内容标题、表格第一列、弹窗的关闭按钮这几个元素的横向位置反复校验，再用键盘滚动、触摸滚动、不同窗口缩放比例分别测一轮。overlay 模式下看不到预留槽位不代表属性没生效，是系统本身就没有给滚动条分配额外占位空间。

降级写法与常见误区

遇到低版本浏览器属性不支持的情况，页面所有交互都要能正常运行。可以保留项目原有的 overflow 逻辑，只让 scrollbar-gutter 负责做视觉层面的稳定适配：

.page-shell {
  overflow: auto;
  /* 不支持 scrollbar-gutter 的浏览器仍按 overflow 正常滚动 */
  scrollbar-gutter: stable;
}

• 不要同时手动写固定的 padding-right 和 stable，不然在经典滚动条环境下很容易出现双倍留白的问题。
• 不要把 scrollbar-gutter 当成完整的滚动锁定方案，弹窗逻辑里还是要正确管理焦点、背景滚动状态，弹窗关闭后还要正确恢复之前的滚动状态。
• 不要把 both-edges 全局批量套到所有容器上，先确认对应布局确实需要两侧对称留白再启用。

常见问题

scrollbar-gutter: stable 会让页面一直显示滚动条吗？

不会。它的核心作用是预留经典滚动条可能占用的空间，不等于强制绘制出滚动条；在overlay滚动条模式下滚动条本身就覆盖在内容上，通常也不会产生实际的gutter占位。

应该把属性写在 body 还是自定义滚动容器上？

直接写在真正产生滚动的盒子上就行。整页滚动的场景通常从 html 入手处理，应用内部的局部滚动，就把属性放在实际设置了 overflow: auto 的容器上。

stable 和 both-edges 要怎么选？

只是想解决弹窗切换导致的页面宽度变化问题，直接选stable就够了；内容布局对左右对称要求高，不想有任何视觉偏移的场景，再选both-edges。

为什么加了属性还是能看到页面横向移动？

先确认发生移动的是不是另一个你没注意到的滚动容器，再检查当前系统用的是不是overlay类滚动条、属性有没有写错在正确的滚动盒上，最后排查弹窗脚本里是不是额外修改了容器的padding或者width属性。

这类问题的核心不是硬把右侧消失的空白补回来，而是先理清楚谁在负责滚动、当前环境的滚动条会不会占用占位空间，再用stable或者both-edges给布局建立明确的空间规则。最后把经典滚动条、overlay滚动条、低版本降级三种状态都完整测一遍，就不会出现本地看起来一切正常，换个用户平台又出现来回跳动的情况。