Firefox未预留滚动条空间问题咨询（需与Chrome行为对齐）

要让Firefox和Chrome保持一致的滚动条空间预留效果，以下是几种可行方案，按推荐优先级排序：

1. 使用标准CSS属性 scrollbar-gutter（最优解） #

这是CSS规范中专门解决滚动条布局跳动问题的属性，现代浏览器（包括Firefox 94+、Chrome 94+）都支持，能自动预留滚动条空间，无需手动计算宽度：

/* 给弹窗的滚动容器添加以下样式 */
.modal-scroll-area {
  overflow-y: auto;
  /* 预留滚动条空间，即使滚动条未显示也保持容器宽度稳定 */
  scrollbar-gutter: stable;
  /* 如果需要左右两边都预留对称空间，可改为：scrollbar-gutter: stable both; */
}

效果：无论滚动条是否显示，容器都会为滚动条预留固定空间，完全匹配Chrome的默认行为，且不会出现内容被覆盖的问题。

2. 兼容旧版Firefox的 fallback 方案 #

如果需要支持Firefox 94以下版本，可通过CSS特性检测+内边距预留空间：

.modal-scroll-area {
  overflow-y: auto;
}

/* 仅针对Firefox生效 */
@supports (-moz-appearance: none) {
  .modal-scroll-area {
    /* 预留滚动条宽度（通常为17px，可根据系统调整） */
    padding-right: 17px;
  }
}

注意：此方法依赖固定的滚动条宽度，若用户系统自定义了滚动条尺寸，可能会出现偏差。

3. 强制Firefox显示非悬浮滚动条 #

若希望Firefox始终显示滚动条（类似Chrome的永久显示），可结合scrollbar-width和overflow-y：

.modal-scroll-area {
  overflow-y: scroll; /* 始终显示垂直滚动条 */
  scrollbar-width: auto; /* Firefox使用非悬浮式滚动条 */
}

缺点：即使内容不足，滚动条也会一直显示，可能影响视觉体验。

内容的提问来源于stack exchange，提问作者Nikita Sviridov