页面抖动主因是滚动条显隐导致body宽度突变或js频繁读写offset类属性引发布局抖动；加html{overflow-y:scroll}可锁定宽度消除抖动，但会常驻滚动条。
局部滚动容器里加 overflow:auto 就抖？先锁死 body 宽度
局部滚动本身不会导致整体页面晃动，真正抖的是全局滚动条的出现/消失——当内容溢出触发垂直滚动条时，body 可用宽度突减 12–17px，所有 width: 100%、margin: 0 auto 或 flex 居中元素都会瞬间左移重排。
解决方法不是改局部容器，而是从根上消除宽度突变：
-
html { overflow-y: scroll }—— 强制垂直滚动条常驻，视口宽度锁定（推荐，兼容性好） - 不要写
body { overflow-y: scroll }，否则可能在某些浏览器里触发双滚动条 - 若设计不允许常驻滚动条，改用
html, body { width: 100vw }+.container { padding-left: calc(100vw - 100%) }补偿滚动条空隙（老方案，Safari 下偶有精度问题）
局部滚动区域里用了 position: fixed 就跳？定位基准错了
在 overflow: auto 或微信小程序 scroll-view 这类局部滚动容器内部设 position: fixed，元素会失去对视口的定位能力，浏览器不断尝试修正位置，表现为高频视觉跳动。
正确做法只有三个方向可选：
- 把 fixed 元素移出滚动容器，直接挂到
document.body下（最稳） - 用
position: sticky替代（注意：IE 不支持，iOS Safari 对sticky的top值解析有细微差异） - 必须保留在容器内时，用
transform: translateY()+requestAnimationFrame手动同步滚动偏移（复杂，仅限兜底）
阻止 a[href="#"] 点击后滚回顶部？别用 preventDefault()
href="#" 触发的是锚点定位行为（scroll to top），不是导航事件，e.preventDefault() 对它完全无效。你绑了 click 事件再调 preventDefault()，页面该跳还是跳。
安全替代方案只有两个：
- 删掉
href属性，用 CSS 补cursor: pointer和下划线（最干净） - 改用
href="javascript:void(0)"（语义稍弱但行为确定） - 若需无障碍支持，用
href="#noop-123"并确保 DOM 中不存在 ID 为noop-123的元素
局部滚动里监听 touchmove 拦默认行为？passive 必须关
H5 弹窗打开后想禁背景滚动，常见做法是给 window 绑 touchmove 并 e.preventDefault()。但现代浏览器默认开启 passive，不显式关掉就拦不住。
关键点就一个：
- 必须写
addEventListener('touchmove', handler, { passive: false })，漏掉{ passive: false }就白写 - 这个监听器要在弹窗显示前绑定，隐藏后及时
removeEventListener，否则影响后续交互 - 更稳妥的方案是：弹窗显示时给
html加style="overflow: hidden"，隐藏时还原；但要注意先存当前scrollTop，还原后手动scrollTo回原位，否则页面会闪回顶部
真正难处理的不是你写的那几行 CSS 或 JS，而是多个“看似无害”的读写操作叠加——比如第三方组件在 mounted 里偷偷调 clientHeight，再配合你自己的 getBoundingClientRect() 循环，抖动就藏在性能面板 Layout 密度里，得靠真机录屏+ Performance 面板交叉比对才能揪出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
