根本原因是fixed脱离文档流后，与滚动条显隐、视口宽度突变、局部滚动容器三者叠加导致布局抖动；典型表现为滚动条出现时width: 100%元素左跳，悬浮footer背景或相邻内容位移造成“整体晃”。
为什么 fixed 底部悬浮条会导致页面晃动
根本原因不是“fixed 本身有问题”，而是它脱离文档流后，与滚动条显隐、视口宽度突变、局部滚动容器三者叠加产生的布局抖动。最典型场景是：页面内容刚好撑满视口时无滚动条 → 用户输入导致内容变长 → 滚动条出现 → body 可用宽度瞬间收窄约 15px → 所有 width: 100% 或 margin: 0 auto 的元素向左跳动 → 悬浮 footer 虽然位置没变，但背景或相邻内容位移，造成“整体晃”感。
html { overflow-y: scroll } 是最直接有效的止抖方案
这行 CSS 强制垂直滚动条常驻，锁死视口宽度，从源头切断宽度突变链。它比给 body 加 overflow-y: scroll 更安全，因为后者在某些嵌套滚动场景下可能触发双滚动条。
-
html { overflow-y: scroll }即可，无需同时设body - Chrome/Firefox/Safari 均原生支持，无需前缀
- 副作用是滚动条始终可见；若设计不允许，必须改用「隐藏全局滚动条 + 局部滚动容器」方案
- Safari 在 zoom 场景下偶有微调，极少数情况可加
html { margin-left: -webkit-scrollbar }补偿（不推荐默认加）
fixed 元素不能嵌套在局部滚动容器里
微信小程序的 scroll-view、Vue 的 el-scrollbar、甚至自定义的 overflow: auto 容器中，内部写 position: fixed 会失效——浏览器试图把它锚定到视口，却被父容器的滚动上下文截断，反复修正定位，表现为高频跳动。
- 把悬浮
footer移出所有局部滚动容器，直接挂到document.body下 - 无法移出时，用
position: sticky替代（注意 iOS Safari 对sticky的兼容细节） - 必须保留在容器内且需“伪固定”效果时，用
transform: translateY()+requestAnimationFrame模拟，避免重排
避免在滚动监听里读写几何属性
如果用了 JS 动态控制悬浮条（比如滑到底部时切为 relative），getScrollHeight()、getWindowHeight()、offsetHeight 这类调用会在每次 scroll 回调中触发同步重排，真卡主线程，不是“看起来卡”。
- 所有尺寸读取必须放在回调开头一次性完成：
const rect = el.getBoundingClientRect(); const { top, height } = rect; - 不要在循环里对多个元素依次读
offsetTop，先querySelectorAll收集，再统一读 - 写样式别逐个设
el.style.top和el.style.left，改用el.style.cssText或Object.assign(el.style, {...}) - 第三方组件库可能在
mounted里偷偷调用clientHeight，这种抖动最难排查，得靠 Performance 面板看 Layout 事件密度
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
