移动端聚焦聊天输入框弹出键盘时如何保持聊天滚动层级稳定

核心问题来源是：传统布局下虚拟键盘弹起会动态修改可视视口高度，浏览器自带的滚动校正逻辑会自动偏移聊天内容的滚动位置，破坏用户原本看到的文本层级。

基础配置准备 #

• 先在页面meta标签中固定视口规则，关闭浏览器自动缩放校正能力，配置内容为：
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
• 优先使用window.visualViewport接口监听视口变化，不要用传统的window resize事件，这个接口可以精准获取虚拟键盘弹起、收起过程中的实时视口参数，不会混入整页文档的高度波动值。

核心稳定逻辑 #

• 在输入框触发聚焦的节点，立刻记录当前聊天滚动容器的实时滚动值：
  prevScrollTop = 聊天滚动容器元素.scrollTop
• 绑定visualViewport.resize事件，在键盘弹起导致视口高度变化的回调中执行两个操作：
  • 重新计算聊天滚动容器的可用高度，让容器高度严格等于可视视口高度减去页面固定导航、底部输入框的高度，不要让容器默认撑满整页文档高度
  • 把之前记录的prevScrollTop重新赋值给聊天容器的scrollTop值，直接抵消浏览器自动产生的滚动偏移
• 给滚动值赋值加100ms左右的防抖处理，因为虚拟键盘弹起过程中视口高度是分阶段变化的，频繁赋值会导致滚动闪烁。

常见避坑要点 #

• 不要依赖传统的window.onresize事件做判断：部分安卓机型下虚拟键盘弹起不会触发该事件，会导致监听完全失效
• 兼容兜底：如果遇到iOS老版本系统不支持visualViewport接口的情况，可以降级为在输入框聚焦后延迟150ms，重新赋值记录的滚动值做修正
• 不要等键盘完全弹起后再修正滚动值：这时浏览器已经完成了自动偏移，用户会明显看到页面闪跳，最好在视口高度开始变化的第一帧就同步滚动值
• 安卓WebView场景需要给WebView配置android:windowSoftInputMode="adjustResize"，不要用adjustPan模式，否则WebView会整体上推整个页面，所有布局都会跟着偏移

内容的提问来源于stack exchange，提问作者expromt192