h5移动端ios输入法软键盘导致fixed布局bug的解决方案
内容提要
iOS 下软键盘唤起会使 fixed 元素失效并随页面滚动。解决方案：禁止 body 滚动，将滚动区域移入 main，header 和 footer 保持 fixed，并为 main 添加 -webkit-overflow-scrolling: touch 恢复弹性滚动。Android 可直接使用 fixed 布局。同时需处理输入框遮挡、底部工具栏遮挡及边缘拖拽露底等问题。
延伸解读
问题根源：软键盘唤起导致 fixed 失效
在 iOS 中，当软键盘被唤起时，页面上的 fixed 定位元素会失效，表现为类似 absolute 的定位行为。如果页面本身可以滚动，这些失效的 fixed 元素就会跟随页面一起滚动，导致布局错乱。这一问题不仅出现在文本输入框，任何会唤起软键盘的控件（如时间日期选择、select 选择等）都可能触发。理解这一点是寻找解决方案的关键。
核心思路：让页面本身不滚动
既然 fixed 失效后跟随页面滚动是问题所在，那么只要让页面本身无法滚动，即使 fixed 失效也不会产生滚动。具体做法是禁止 body 滚动，将原本 body 的滚动区域转移到 main 元素内部，header 和 footer 仍保持 fixed 定位。这样，滚动只发生在 main 内部，fixed 元素就不会跟随滚动。
实现细节：内部滚动与弹性恢复
将 main 设置为绝对定位，通过 top 和 bottom 留出 header 和 footer 的高度，并设置 overflow-y: scroll 使其内部可滚动。但这样在 iOS 上滚动会失去弹性，手指松开即停。添加 -webkit-overflow-scrolling: touch 可以恢复流畅的弹性滚动。对于更老的 iOS 系统，可将 fixed 替换为 absolute，效果相同。
平台差异与额外注意事项
Android 2.3+ 不支持 overflow-scrolling，但 body 上的滚动依然流畅，因此可以直接使用传统的 fixed 布局。若需兼容 Android 2.3 以下，则需借助 isScroll.js 等库。此外，还需处理输入框被软键盘遮挡（可用 scrollIntoView）、第三方浏览器底部工具栏遮挡 fixed 元素、以及页面拖拽到边缘时“露底”等问题，可通过调整距离或阻止 touchmove 事件来缓解。
Q&A
iOS下软键盘唤起后fixed布局会出现什么问题？
软键盘唤起后，页面的fixed元素会失效，变成类似absolute定位，当页面滚动时，fixed元素会跟随页面一起滚动。
如何解决iOS下软键盘导致fixed布局失效的问题？
禁止body滚动，将滚动区域移到main内部，header和footer保持fixed，并为main添加-webkit-overflow-scrolling: touch恢复弹性滚动。
为什么将滚动区域移到main内部可以解决fixed失效问题？
因为页面本身不滚动，即使fixed元素失效，也不会跟随页面滚动，从而避免bug。
Android下如何处理fixed布局与输入框？
Android 2.3+可以直接使用fixed布局，因为body滚动流畅；如需支持Android 2.3以下，可使用isScroll.js实现内部滚动。
如何解决输入框被软键盘遮挡的问题？
可以尝试使用input元素的scrollIntoView进行修复。
如何防止页面滚动到边缘时拖拽露底？
在页面拖拽到边缘时，通过判断拖拽方向以及是否为边缘来阻止touchmove事件，防止页面继续拖拽。
