CSS scrollbar-gutter 防止弹窗打开时页面横向跳动的设置方案

弹窗打开后页面突然向左或向右挪一小段，常见原因不是弹窗动画，而是页面滚动条被隐藏后，内容区多出了一段滚动条宽度。经典滚动条会占用布局空间，overflow: hidden 让它消失，居中容器和固定导航就可能重新计算位置。

官方参考地址：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scrollbar-gutter

优先把 scrollbar-gutter: stable 放在页面真正的滚动容器（通常是 html）上，让滚动条出现与隐藏都保留相同的布局槽位；只有兼容性不满足时，才用 JavaScript 测量滚动条宽度并补偿。

先确认跳动来自页面滚动条占位消失

打开弹窗时，很多组件会给 body 添加禁止滚动的 class。若页面原本有经典滚动条，锁定滚动后它会从布局中消失，视口可用宽度随之增加。用浏览器开发者工具临时切换这个 class：如果主体、居中卡片和 position: fixed 导航同时横移，而弹窗自身没有明显位移，优先排查滚动条槽位。

还要先找准滚动容器。页面滚动通常由 html 承担，局部列表可能由 .panel 或 .dialog-body 承担；属性加在不滚动的 body 上，往往看不到预期效果。

在 html 滚动容器上配置 scrollbar-gutter: stable

最小配置可以保持页面内容区的宽度稳定：

/* 在页面滚动容器上预留经典滚动条位置，避免弹窗锁定后内容区变宽。 */
html {
  scrollbar-gutter: stable;
}

/* 弹窗打开时只负责锁定滚动，不再手动猜滚动条宽度。 */
body.modal-open {
  overflow: hidden;
}

stable 的意思是即使当前没有滚动条，也预留可能出现的槽位。经典滚动条环境下，这能让弹窗前后的主体宽度保持一致；覆盖式滚动条本来就不占布局空间，因此通常不会凭空增加一列空白。

若页面采用双侧对称的内容框，可评估 stable both-edges。它会在两侧保留对应空间，适合需要视觉中心严格对齐的布局，但不应无条件套用到所有页面。

用容器边界和降级方案处理兼容差异

scrollbar-gutter 只作用于设置它的滚动框。页面有嵌套滚动区时，要把属性放在实际发生滚动的元素上，并检查该元素是否真的会出现经典滚动条：

/* 局部滚动面板单独预留槽位，避免面板内容增多时横向跳动。 */
.results-panel {
  overflow: auto;
  scrollbar-gutter: stable;
}

/* 同一滚动框的内容与滚动条共用这块稳定空间。 */
.results-panel__content {
  min-width: 0;
}

如果目标环境不支持该属性，可以只在不支持时补偿。下面的示例把补偿放进打开与关闭流程，避免页面关闭弹窗后一直残留偏移：

function setPageScrollLock(locked) {
  const root = document.documentElement;
  const body = document.body;

  // 原生方案可用时不重复计算，避免双重占位。
  if (!CSS.supports("scrollbar-gutter: stable")) {
    if (locked) {
      const gap = window.innerWidth - root.clientWidth;
      // 只补偿经典滚动条实际占用的宽度。
      body.style.paddingInlineEnd = `${gap}px`;
    } else {
      // 关闭弹窗时必须还原，避免下一次页面布局继续偏移。
      body.style.removeProperty("padding-inline-end");
    }
  }

  // 滚动锁定状态由 class 统一管理，方便组件复用。
  body.classList.toggle("modal-open", locked);
}

选择表：原生属性还是 JavaScript 补偿

排查时可以按“滚动容器、滚动条类型、锁定方式、固定元素”四项核对。若只改了弹窗的 transform 或给 body 硬编码 16px，通常只能掩盖某一台机器上的结果；让布局依赖稳定槽位，才不必猜操作系统的滚动条宽度。

相关问题

为什么设置了 scrollbar-gutter 仍然会跳动？

先确认属性写在真正的滚动框上，再检查跳动是否来自字体加载、弹窗宽度或内容重排，而不是滚动条占位。

应该把 scrollbar-gutter 写在 body 还是 html？

页面级滚动优先检查 html；如果应用把滚动交给自定义容器，就写在那个容器上。

还需要保留 overflow-y: scroll 吗？

不必把它当成默认方案。先使用 stable，只有为兼容旧环境或特定布局明确需要常驻滚动条时，才考虑额外策略。