CSS scrollbar-gutter：滚动条占位与布局稳定

---

title: CSS scrollbar-gutter：滚动条占位与布局稳定

keywords:

• scrollbar-gutter
• 布局稳定
• 滚动条占位
• CLS
• 溢出处理

description: 说明 scrollbar-gutter 的行为与用法，通过为滚动容器保留滚动条占位，提高跨平台布局稳定性，减少因滚动条出现/消失导致的抖动（CLS）。

categories:

• 文章资讯
• 编程技术

---

概述

不同平台滚动条的显示与占位差异可能导致布局抖动。scrollbar-gutter 允许为滚动容器预留滚动条槽（gutter），在内容溢出与滚动条出现时保持内容宽度稳定。

示例

.scroll { overflow: auto; scrollbar-gutter: stable }
/* 保留两侧槽位（如需要） */
.scroll-both { overflow: auto; scrollbar-gutter: stable both-edges }

工程建议

• 适用场景：在网格/卡片布局与侧边栏中启用，避免行列对齐被滚动条影响。
• 与响应式：结合 clamp()/容器查询，控制在不同断点的滚动策略。
• 兼容：不支持时回退到固定内边距与 max-width 控制；验证跨平台表现。

参考与验证

• MDN scrollbar-gutter 文档：https://developer.mozilla.org/docs/Web/CSS/scrollbar-gutter
• CSS Overflow 规范：https://www.w3.org/TR/css-overflow-4/