概述 不同平台滚动条的显示与占位差异可能导致布局抖动。`scrollbar-gutter` 允许为滚动容器预留滚动条槽(gutter),在内容溢出与滚动条出现时保持内容宽度稳定。 示例 ```css .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/

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论
立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部