Flutter Web：WebView滚动到边界时如何继续滚动父组件

问题核心是嵌入的IFrame会拦截所有滚动事件，导致父组件无法在WebView滚动到边界时继续滚动。可以通过给IFrame添加滚动事件监听，在到达滚动边界时将事件传递给父元素来解决。

修改后的代码如下：

import 'package:flutter/material.dart';
import 'dart:ui' as ui;
import 'dart:html';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  @override
  void initState() {
    super.initState();
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
      'webview',
      (int viewId) {
        final iframe = IFrameElement()
          ..src = 'https://flutter.dev'
          ..style.height = '100%'
          ..style.width = '100%';

        // 添加滚动事件监听
        iframe.onScroll.listen((event) {
          final scrollTop = iframe.scrollTop;
          final scrollHeight = iframe.scrollHeight;
          final clientHeight = iframe.clientHeight;

          // 判断是否滚动到顶部或底部（留1px误差避免精度问题）
          final isAtTop = scrollTop <= 0;
          final isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;

          if (isAtTop || isAtBottom) {
            // 阻止IFrame处理剩余滚动事件，转由父容器处理
            event.preventDefault();
            // 获取父滚动容器
            final parentScroll = document.querySelector('.parent-scroll-container');
            if (parentScroll != null) {
              // 根据滚轮方向触发父容器滚动
              final delta = (event as WheelEvent).deltaY;
              parentScroll.scrollBy(0, delta);
            }
          }
        });

        return iframe;
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SingleChildScrollView(
          // 给父滚动容器添加类名，方便DOM查询
          child: Container(
            className: 'parent-scroll-container',
            child: Column(
              children: [
                Container(
                  height: 400,
                  color: Colors.red,
                ),
                SizedBox(
                  height: 400,
                  child: HtmlElementView(
                    viewType: 'webview',
                    key: UniqueKey(),
                  ),
                ),
                Container(
                  height: 400,
                  color: Colors.green,
                ),
                Container(
                  height: 400,
                  color: Colors.blue,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

关键说明： #

• 给IFrame注册onScroll事件监听器，实时判断滚动位置是否到达顶部或底部
• 到达边界时调用event.preventDefault()阻止IFrame继续处理滚动，手动触发父滚动容器的滚动操作
• 通过给父容器添加自定义类名，方便用DOM查询获取父滚动元素，确保滚动事件能正确传递
• 利用滚轮事件的deltaY值保持滚动方向和幅度的一致性

注意事项： #

• 若嵌入的是非同源网站，受浏览器同源策略限制，无法直接获取IFrame的滚动属性，此时需要在IFrame内部添加滚动监听，通过postMessage向主页面发送边界触发信号，再由主页面处理父容器滚动
• 滚动边界判断添加1px误差，避免因浏览器精度问题导致判断失效

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