WebView展示站点内模态弹窗后滚动失效问题排查与解决

可能的原因 #

• 网页JS滚动锁残留：站点模态弹窗显示时，通常会通过JS将body或父容器的overflow设为hidden禁止背景滚动，但弹窗关闭后未正确恢复该属性，导致WebView的滚动容器被持续锁定。
• Compose与WebView事件传递冲突：在Compose环境下（无论用Accompanist封装还是AndroidView直接调用），模态弹窗触发后，WebView的触摸事件传递链可能因Compose重组或视图层级变化中断，无法正确接收滚动触摸事件。
• WebView内部滚动状态异常：弹窗显示/关闭过程中，WebView内部的滚动组件（如ScrollViewImpl）状态出错，比如滚动位置被错误锁定，或触摸检测逻辑未自动恢复。

可行的解决方法 #

1. 网页端修正（若可控制站点代码） #

• 弹窗关闭时，严格恢复body及相关容器的overflow属性到初始值（如auto或visible），避免残留hidden状态；
• 弹窗的触摸遮罩、事件监听在关闭时彻底解绑，防止持续拦截WebView的触摸事件。

2. WebView端主动干预 #

• 强制重置网页滚动属性：监听弹窗关闭事件（可通过WebChromeClient捕获JS弹窗事件，或注入JS监听弹窗关闭回调），执行JS代码恢复滚动：

  webView.evaluateJavascript("""
      document.body.style.overflow = 'auto';
      document.documentElement.style.overflow = 'auto';
  """, null)
  

• 重置WebView触摸事件链：添加触摸监听，强制WebView接收滚动事件：

  webView.setOnTouchListener { _, event ->
      if (event.action == MotionEvent.ACTION_MOVE) {
          webView.requestDisallowInterceptTouchEvent(false)
      }
      false
  }
  

• Compose状态驱动更新：在Compose中监听弹窗关闭状态，通过LaunchedEffect触发滚动重置，无需重建WebView：

  LaunchedEffect(isModalClosed) {
      if (isModalClosed) {
          webView.evaluateJavascript("document.body.style.overflow='auto';", null)
          webView.scrollTo(webView.scrollX, webView.scrollY)
      }
  }
  

3. 替代临时修复（无需重建WebView） #

弹窗关闭后执行以下操作替代页面切换：

• 调用webView.clearFocus()后再webView.requestFocus()，重置焦点与触摸事件关联；
• 仅在上述方法无效时，执行webView.reload()。

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