根本原因是滚动条出现时占用空间导致重排，解决方案是保持占位但透明化：firefox用scrollbar-width:thin+scrollbar-color，chrome/safari用::-webkit-scrollbar设透明宽高并禁用交互，全局兜底可加padding-right与margin-right抵消。
滚动条占位导致布局抖动的根本原因
浏览器默认滚动条会占据容器右侧空间，当内容高度超过容器、滚动条出现时，可用宽度突然变小，触发重排，视觉上就是“抖动”。关键不是隐藏滚动条，而是让滚动条始终存在但不可见——即保留占位但透明化。
用 overflow 和 scrollbar-width 控制占位与可见性（Firefox）
Firefox 支持 scrollbar-width 属性，设为 none 会彻底移除滚动条（包括占位），这不是我们想要的；设为 thin 则保留占位且滚动条窄而半透明，配合 scrollbar-color 可进一步控制颜色：
body {
scrollbar-width: thin;
scrollbar-color: rgba(0,0,0,0.2) transparent;
}
-
scrollbar-width: thin在 Firefox 中强制保留滚动条占位，避免抖动 -
scrollbar-color第一个值是滑块色，第二个是轨道色；全设为透明仍保留占位，只是看不见 - 仅 Firefox 支持，Chrome/Safari 不识别该属性，需配合 WebKit 方案
用 ::-webkit-scrollbar 实现 Chrome/Safari 的透明不占位（实际是“伪不占位”）
WebKit 内核无法真正“不占位”，但可通过将滚动条宽高设为 0 并用 padding 或 margin 补齐占位空间。更稳妥的做法是：保持默认占位宽度（如 17px），但把所有滚动条部件设为透明，并禁用交互：
body::-webkit-scrollbar {
width: 17px; /* 显式固定宽度，防止动态变化 */
}
body::-webkit-scrollbar-track {
background: transparent;
}
body::-webkit-scrollbar-thumb {
background: transparent;
border: none;
}
body::-webkit-scrollbar-thumb:hover {
background: transparent;
}
/* 禁用拖拽和点击 */
body::-webkit-scrollbar-thumb {
-webkit-appearance: none;
}
- 必须显式设置
width或height，否则不同内容下滚动条可能忽有忽无 - 只设
background: transparent不够，部分浏览器仍响应 hover 或点击，加-webkit-appearance: none更可靠 - 此方案在 Chrome/Safari 下滚动仍可用，只是看不见；占位始终存在，无抖动
全局统一处理需注意的兼容性陷阱
不同系统默认滚动条宽度不同（Windows 常为 17px，macOS 隐藏式但仍有占位逻辑），纯 CSS 无法动态读取。最稳妥的兜底方式是：对可能溢出的容器统一加 padding-right: 17px，再用 overflow-y: scroll 强制显示滚动条（含占位）：
.scroll-container {
overflow-y: scroll;
padding-right: 17px; /* 补齐滚动条占位 */
margin-right: -17px; /* 抵消 padding 导致的外扩 */
}
-
overflow-y: scroll强制显示滚动条（即使内容不够长），确保占位恒定 -
padding-right + margin-right组合可避免影响布局流，但仅适用于已知宽度容器 - 移动端 Safari 对
::-webkit-scrollbar支持极差，iOS 上建议直接接受原生滚动行为，不强求隐藏
真正的“不占位”滚动条在标准 CSS 中不存在；所谓“不抖动”，本质是让占位稳定且不可见。最容易被忽略的是：在 flex 或 grid 容器中直接对 body 设置滚动条样式可能失效，需作用于具体滚动容器，且要检查父级是否设置了 overflow: hidden 拦截了滚动行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
