Android端嵌入Banno的iframe应用滚动异常问题求助

针对iframe嵌入Banno后Android端滚动异常（iOS及Web正常）的问题，可尝试以下针对性方案：

• 调整滚动容器与iframe的CSS属性
  强制明确触摸滚动行为，避免Android WebView的事件冲突：

  /* 内部滚动容器样式 */
  .scroll-container {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  
  /* iframe本身的样式 */
  iframe {
    touch-action: pan-y;
    pointer-events: auto;
  }
  

  touch-action: pan-y会告诉浏览器只允许垂直滚动行为，避免触摸事件被父容器或WebView拦截。

• 阻止滚动事件冒泡
  在iframe内部添加JS监听，防止滚动事件传递到Banno的父容器：

  const scrollContainer = document.querySelector('.scroll-container');
  scrollContainer.addEventListener('touchmove', function(e) {
    // 只有当容器可滚动时才阻止冒泡
    if (this.scrollTop > 0 || this.scrollHeight > this.clientHeight) {
      e.stopPropagation();
    }
  }, { passive: false });
  

  注意设置passive: false，Android WebView默认会将touchmove事件设为passive，导致无法阻止冒泡。

• 检查Banno Android WebView配置（若有权限）
  如果能配置Banno的WebView参数，需确保开启以下关键设置：

  webView.setVerticalScrollBarEnabled(true);
  webView.getSettings().setUseWideViewPort(true);
  webView.getSettings().setLoadWithOverviewMode(true);
  webView.getSettings().setDomStorageEnabled(true);
  

  这些设置能保证WebView正确适配页面布局并支持滚动行为。

• 简化嵌套滚动结构
  移除iframe内部多余的嵌套滚动容器，Android WebView对多层嵌套滚动的兼容性较差，尽量只保留一层核心滚动容器。

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