CSS scrollbar-gutter 滚动条保留与布局稳定性实践

CSS scrollbar-gutter 滚动条保留与布局稳定性实践概述`scrollbar-gutter` 允许为滚动容器预留滚动条空间，减少滚动出现/消失时的 CLS（布局位移）。核心概念与参数`scrollbar-gutter: stable`：稳定保留滚动条空间；`both-edges` 在双侧预留。经典滚动条 vs 覆盖滚动条：覆盖滚动条时该属性不生效。实践示例.content { overflow: auto; scrollbar-gutter: stable; } 验证方法规范与支持：参考 MDN“scrollbar-gutter”，确认现代浏览器支持并注意覆盖滚动条的影响。视觉与指标：对比滚动出现/消失场景的 CLS 指标与文本抖动。注意事项移动端覆盖滚动条场景该属性不生效，评估收益有限。与 `scrollbar-width`、`overflow` 组合时保证可访问与可用性。参考：MDN（scrollbar-gutter）、CSS-Tricks 指南。