移动端两栏滚动抖动的根本原因是两栏容器未脱离文档流或内部元素频繁重排，如未设宽高的图片加载撑开布局、sticky元素缺少overflow-anchor、js动态修改left/margin触发layout thrashing等；应改用flex+transform脱离文档流、精准处理滚动条宽度、使用dvh单位适配键盘弹出，并从结构、css、生命周期三层面协同优化。
移动端两栏布局为什么一滚动就抖
根本原因不是 CSS 写错了，而是两栏容器本身没脱离文档流，或内部元素频繁触发重排。比如用 flex 布局但子列里塞了未设 width/height 的 <img>，图片加载瞬间撑开高度；又或者右侧栏用了 position: sticky 却没配 overflow-anchor: auto，滚动时浏览器反复修正锚点位置——这些都会让两栏上下错位、文字跳闪。
用 flex + transform 替代 left/top 控制列位移
很多“防抖”方案试图用 JS 监听 scroll 后动态改 left 或 margin-left，这等于主动触发 layout thrashing。正确做法是让其中一栏（比如侧边栏）完全脱离文档流，只靠 transform 移动：
- 主容器设
display: flex，左侧栏加position: absolute且父容器必须有position: relative - 动画/展开逻辑全部走
transform: translateX(-100%)→translateX(0)，不碰left、margin、width - 加
backface-visibility: hidden强制启用 GPU 合成，避免旧版 Safari 渲染抖动 - 若需响应式切单列（如小屏收起侧栏），用
@media (max-width: 768px)切flex-direction: column，而非 JS 动态增删 class
滚动条消失导致的左右偏移怎么锁死
移动端弹出模态框或键盘后，body 滚动条隐藏，右侧栏会突然右移——这不是你两栏的问题，是 body 宽度突变。不能靠 overflow-y: scroll 硬留滚动条（iOS 会显示空条），得用更精准的控制：
- 检测滚动条宽度：先读
document.body.offsetWidth，再临时设body.style.overflow = 'hidden'，再读一次，差值即为滚动条宽度 - 给两栏外层容器加
padding-right: ${scrollBarWidth}px（不是margin），这样滚动条隐去时，padding 补足空间，内容不跳 - 别在
touchstart阶段就计算——要等focus或show事件稳定后再测，否则安卓 WebView 可能返回抖动值 - 微信 X5 内核不支持
visualViewport，得降级监听focusin+setTimeout(() => window.scrollY, 100)判定是否键盘弹起
contenteditable 编辑器嵌在右栏时特别容易抖
如果右栏是富文本编辑器（比如 Quill 或自定义 contenteditable），软键盘弹出会直接废掉 100vh 和所有基于 window.innerHeight 的高度计算，导致两栏比例崩坏、光标错位、工具栏悬浮在键盘上。
- 右栏容器高度绝不能写
height: 100vh，改用min-height: 100dvh（注意dvh是动态视口单位，Chrome 105+/Safari 16.4+ 支持） - 监听
visualViewport?.addEventListener('resize', ...)，根据visualViewport.height实时调整右栏max-height - 键盘收起后，别立刻
scrollTo(0, 0)——iOS 会卡住，改用requestAnimationFrame(() => window.scrollTo(0, 0)) - 若用 Vue/React，优先用
v-model或useState控制编辑器状态，别手动操作innerHTML或频繁调用getSelection()
真正难防的抖动，往往藏在「第三方组件初始化时偷偷读 offsetHeight」或「CSS 动画里混写了 top 和 transform」这种细节里。防抖不是加一层 JS 封装，而是从 HTML 结构、CSS 属性选择、滚动生命周期三个层面同步约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
