scrollbar-gutter: stable 仅对 html 元素生效，因规范限定其仅作用于根滚动容器；需配合 overflow-y: auto 才能触发预留空间，且须用层叠回退兼容旧浏览器。
scrollbar-gutter: stable 为什么只在 html 上生效
它不是“没效果”，而是根本没被浏览器处理——scrollbar-gutter 是 CSS 规范中明确限定为**仅根滚动容器（即 html 元素）有效**的属性。写在 body、.main 或任何 div 上，浏览器直接忽略，控制台也不会报错。
常见错误现象：.container { scrollbar-gutter: stable; } → 页面照抖；body { scrollbar-gutter: stable; } → 依然无效。
- 必须写成：
html { scrollbar-gutter: stable; overflow-y: auto; } -
overflow-y: auto是触发条件，缺了它，scrollbar-gutter不会预留空间 - 不要和
overflow: hidden或overflow: overlay混用——前者禁滚动，后者已废弃且不触发 gutter 逻辑
@supports 检测必须配合层叠回退
Chrome/Edge 94+、Firefox 97+、Safari 16.4+ 支持 scrollbar-gutter: stable，但旧版 Edge（≤112）、部分安卓 WebView、所有 IE 都不支持。只靠 @supports 写一层，等于没兜底。
正确做法是利用 CSS 层叠优先级做渐进增强：
html {
overflow-y: scroll; /* 所有浏览器都认，强制常驻滚动条 */
}
@supports (scrollbar-gutter: stable) {
html {
overflow-y: auto;
scrollbar-gutter: stable;
}
}
- 旧环境走第一行，布局稳（虽滚动条常显）
- 新环境覆盖为按需显示 + 预留空间，视觉自然
- 不用 JS 检测，零运行时开销
- 别用
@supports not (scrollbar-gutter: stable)单独写 fallback —— 它无法保证执行顺序，容易被覆盖
scrollbar-gutter: stable both-edges 的兼容性陷阱
both-edges 在 Chromium 120+（Chrome 120 / Edge 120 起）才原生支持，Firefox 和 Safari 当前仍不识别该值。设了却无效，反而可能干扰渲染。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
实际项目中建议：
- 日常防抖动，用
scrollbar-gutter: stable即可（右侧单边预留已足够） - 仅当项目明确需支持 RTL 布局且已确认运行环境为 Chromium ≥120 时，才加
both-edges - 不要写成
scrollbar-gutter: stable both——both不是合法值，会被整个声明丢弃 - macOS Safari 默认隐藏滚动条，
stable能让它悬停出现时不挤内容；Windows 下滚动条常显，stable也照样预留，无副作用
Bootstrap Modal 等 JS 库导致的二次偏移
Bootstrap 5.3+ 默认启用 JS 滚动条补偿逻辑：Modal 打开时往 body 注入 padding-right，哪怕你已设 html { scrollbar-gutter: stable }，也会造成双重占位或冲突，抖动更明显。
必须手动覆盖：
body.modal-open { padding-right: 0 !important; }- 初始化前禁用其检测：
Bootstrap.Modal.Default.scrollbarWidth = 0; - 确保
html的scrollbar-gutter已生效，否则 JS 补位逻辑仍会误判
真正难搞的不是属性本身，而是它和第三方库、系统滚动策略、甚至本地开发协议（如 file://）之间的隐式耦合——这些地方不排查，scrollbar-gutter 再标准也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
