使用自适应内容尺寸模式时如何预留滚动条宽度？

推荐方案：使用CSS scrollbar-gutter 属性 #

这是原生CSS解决方案，无需提前知晓滚动条尺寸，就能自动为垂直滚动条预留空间，完全匹配你想要的效果：

• 当元素内容无需滚动时，仍会预留滚动条宽度的空白区域，避免布局跳动
• 内容溢出需要滚动时，滚动条直接占用预留空间，不会遮挡原有内容
• 兼容Firefox 94+、Chrome 94+等主流现代浏览器

代码示例 #

为目标网格单元格或块元素添加以下样式：

.target-element {
  scrollbar-gutter: stable;
  overflow-y: auto; /* 保持原有滚动逻辑 */
}

额外说明 #

如果需要同时为水平滚动条预留空间，可以使用scrollbar-gutter: stable both-edges；若希望仅在内容溢出时才触发空间预留（无溢出时不占用额外宽度），可搭配overflow: auto的默认逻辑，scrollbar-gutter: stable会自动适配这种场景。

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