scrollbar-gutter: stable必须作用于html根元素才生效，写在body或div上无效；需搭配overflow-y: auto或scroll触发预留空间，降级可fallback至overflow-y: scroll。
scrollbar-gutter必须写在html上才生效
写了scrollbar-gutter: stable却没效果？大概率是把它加在了body、.container或任意div上。该属性只对根滚动容器（即html元素）起作用，浏览器会直接忽略其他位置的声明。
常见错误现象：
– body { scrollbar-gutter: stable } → 完全无反应
– .main { scrollbar-gutter: stable; overflow-y: auto } → 预留空间逻辑不触发
实操建议：
• 必须用html { scrollbar-gutter: stable; overflow-y: auto }
• 不要加!important——该属性不支持优先级覆盖
• 如果用了normalize.css等重置库，检查它是否重写了html的overflow，导致overflow-y: auto被覆盖
scrollbar-gutter需要配合overflow-y: auto或scroll才能触发
单独写scrollbar-gutter: stable不会预留空间——它只是“策略”，真正触发预留行为的是overflow-y的值。
常见错误现象：
– 只设html { scrollbar-gutter: stable }，没配overflow-y → 无任何布局变化
– 用了overflow-y: hidden → 滚动被禁用，scrollbar-gutter失去意义
实操建议：
• 推荐组合：html { scrollbar-gutter: stable; overflow-y: auto }
• 若需降级兼容，可共存：html { scrollbar-gutter: stable; overflow-y: scroll }（两者不冲突）
• 避免overflow: hidden或overflow-y: visible搭配使用
stable和both-edges选哪个？看是否要求严格居中
scrollbar-gutter: stable只在右侧预留空间；both-edges则左右各留一份。这不是为了显示两个滚动条，而是为居中布局留更保守的余量。
使用场景：
• 单栏博客页、表单页 → stable足够
• 带固定宽度侧边栏的后台系统 → both-edges可避免RTL切换或双滚动条逻辑引发的不对称偏移
• 设计稿明确要求“内容永远严格居中” → 直接选both-edges，哪怕当前只用右滚动条
注意：
• both-edges不是“双滚动条”，只是预留策略更宽裕
• 在margin: 0 auto容器中，stable可能导致轻微视觉偏移，both-edges能抵消这种不对称
不支持scrollbar-gutter时必须fallback
Chrome 94+、Firefox 97+、Safari 16.4+才原生支持。旧版 Safari（≤16.3）、Edge（≤108）等会直接忽略该声明，退回到原始抖动行为。
立即学习“前端免费学习笔记（深入）”；
实操建议：
• 用@supports做渐进增强：
html { overflow-y: scroll; }<br>@supports (scrollbar-gutter: stable) {<br> html { overflow-y: auto; scrollbar-gutter: stable; }<br>}• 不要只依赖
scrollbar-gutter——它本身不具备兜底能力•
overflow-y: scroll虽让滚动条常驻，但设计上可接受；若真不能容忍可见滚动条，需结合::-webkit-scrollbar隐藏滑块（仅限WebKit）
最容易被忽略的一点：即使写了@supports，也要确认你的构建工具（如PostCSS）没把@supports规则删掉或转义错——有些老版本插件会误删未知特性检测。
