本文介绍通过强制显示垂直滚动条来消除页面切换时因滚动条出现/消失引发的布局抖动，确保多页应用中视觉宽度一致、过渡平滑。
本文介绍通过强制显示垂直滚动条来消除页面切换时因滚动条出现/消失引发的布局抖动，确保多页应用中视觉宽度一致、过渡平滑。
在 React 单页应用中，当不同路由页面的可滚动内容高度不一致时（例如首页采用列内局部滚动，而排行榜页依赖全局文档滚动），浏览器会动态显示或隐藏右侧垂直滚动条。由于滚动条本身占据约 12–17px 的视口宽度（取决于操作系统和浏览器），其出现或消失会导致 可用宽度突变，进而引发整个页面内容“向左/右轻微跳动”——即所谓的 layout shift。这种现象虽细微，却严重影响用户体验与专业感。
最直接、低侵入、高兼容的解决方案是：统一控制 的滚动行为，使其始终保留垂直滚动空间。无需修改任何组件结构、不调整路由逻辑、也不依赖 JavaScript 动态计算，仅需一行 CSS 即可根治：
/* index.css 或全局样式入口文件中添加 */
body {
overflow-y: scroll;
}
✅ overflow-y: scroll 强制浏览器始终渲染垂直滚动条（即使内容未溢出），从而锁定视口可用宽度；
⚠️ 注意不要使用 overflow-y: auto —— 它仍会在内容不足时隐藏滚动条，无法解决跳动问题；
? 若希望保持 macOS 滚动条“仅悬停显示”的原生体验（视觉上隐藏但保留占位），可改用更精细的方案：
body {
/* 保留滚动能力，同时避免宽度变化 */
overflow-y: scroll;
}
/* 针对支持自定义滚动条的浏览器（Chrome / Edge / Safari 16.4+）可进一步优化视觉 */
body::-webkit-scrollbar {
width: 16px;
}
body::-webkit-scrollbar-track {
background: transparent;
}
body::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.1);
border-radius: 8px;
border: 4px solid transparent;
background-clip: content-box;
}
此外，如项目中已使用 CSS Reset 或现代 UI 框架（如 Tailwind），请确保该 body 样式具有足够优先级（建议置于全局基础样式顶部），避免被后续 * { overflow-y: auto } 等通配符规则覆盖。
总结：该问题本质是浏览器默认行为导致的视觉副作用，而非代码逻辑缺陷。通过声明式 CSS 统一 body 的 overflow-y 行为，即可零成本、零风险、跨浏览器地实现布局稳定性。推荐将 body { overflow-y: scroll } 作为所有 Web 应用的默认基础样式之一，尤其适用于多页布局、后台管理系统及内容型站点。
