InAppWebView中如何检测iframe及页面局部区域的滚动？

你当前使用的onScrollChanged只能监听WebView主视口的滚动，对于Miro/Figma画布、汉堡菜单这类页面内的局部滚动区域完全无效——核心原因是这类局部滚动的事件不会冒泡到window层面，也无法被WebView的原生滚动回调捕获。要覆盖这类场景，需要通过注入JavaScript监听页面内所有元素的滚动事件，再将数据传递回Flutter。

以下是具体实现方案：

1. 配置JavaScript数据通道 #

初始化InAppWebView时，创建一个用于接收JS滚动数据的通道：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://miro.com")),
  javascriptChannels: Set.from([
    JavascriptChannel(
      name: 'ScrollChannel',
      onMessageReceived: (JavascriptMessage message) {
        final scrollData = jsonDecode(message.message);
        final pxRatio = MediaQuery.of(context).devicePixelRatio;
        
        context.read<AppData>().scroll.add(
          ScrollData(
            scrollProgress: scrollData['scrollTop'] / pxRatio,
            timestamp: DateTime.now(),
            // 可选：记录触发滚动的元素标识
            elementTag: scrollData['elementTag'],
          ),
        );
      },
    ),
  ]),
  // 其他WebView配置项...
)

2. 注入滚动监听的JavaScript代码 #

在页面加载完成后（比如onLoadStop回调中），注入JS代码监听所有元素的滚动事件，包括动态生成的元素：

onLoadStop: (controller, url) async {
  await controller.evaluateJavascript(source: """
    // 节流函数，避免滚动时频繁触发回调
    function throttle(func, delay) {
      let lastTrigger = 0;
      return function(...args) {
        const now = Date.now();
        if (now - lastTrigger >= delay) {
          lastTrigger = now;
          func(...args);
        }
      };
    }

    // 处理滚动事件的核心逻辑
    const handleScroll = throttle(function(e) {
      const target = e.target;
      // 只处理存在滚动空间的元素
      if (target.scrollHeight > target.clientHeight || target.scrollWidth > target.clientWidth) {
        ScrollChannel.postMessage(JSON.stringify({
          scrollTop: target.scrollTop,
          scrollLeft: target.scrollLeft,
          elementTag: target.tagName || 'unknown'
        }));
      }
    }, 100); // 100ms节流间隔，可按需调整

    // 监听现有元素的滚动事件（捕获阶段触发，避免事件被阻止冒泡）
    document.addEventListener('scroll', handleScroll, true);

    // 用MutationObserver监听动态添加的元素，自动绑定滚动监听
    const observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        mutation.addedNodes.forEach(function(node) {
          if (node.nodeType === Node.ELEMENT_NODE) {
            node.addEventListener('scroll', handleScroll, true);
            // 递归给子元素绑定监听
            node.querySelectorAll('*').forEach(child => child.addEventListener('scroll', handleScroll, true));
          }
        });
      });
    });

    // 启动观察者，监听body下所有元素的添加
    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  """);
},

3. 关键注意事项 #

• 性能控制：必须给scroll事件加节流，否则页面滚动时会产生大量回调，拖慢Flutter端性能。
• 元素过滤：可以根据业务需求添加过滤规则（比如排除特定class/id的元素），减少不必要的回调。
• 内存清理：在WebView销毁前，记得调用JS代码停止MutationObserver并移除所有滚动监听，避免内存泄漏。
• 跨域兼容：如果目标网站有CSP限制，需确保注入的JS符合网站安全策略，或在WebView配置中允许脚本执行。

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