如何在Flutter WebView中检测滚动至网页底部？

在Flutter中实现WebView滚动到底部的检测，主要有两种主流方案，对应不同的WebView插件，下面分别说明：

一、使用官方 webview_flutter 插件 #

官方插件需要通过注入JavaScript监听滚动事件，再通过JavaScriptChannel将事件传递到Flutter端，具体步骤如下：

1. 初始化WebViewController时，开启JavaScript支持，并创建用于接收底部事件的JavaScriptChannel
2. 注入监听网页滚动的JS代码，计算滚动位置与网页总高度的关系，满足条件时触发Flutter端的回调
3. 在Flutter端处理收到的底部事件

代码示例 #

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

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

  @override
  State<WebViewBottomDetector> createState() => _WebViewBottomDetectorState();
}

class _WebViewBottomDetectorState extends State<WebViewBottomDetector> {
  late final WebViewController _controller;
  final String _bottomChannel = 'scrollBottomChannel';

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      // 创建接收网页消息的通道
      ..addJavaScriptChannel(
        _bottomChannel,
        onMessageReceived: (msg) {
          if (msg.message == 'reachedBottom') {
            // 这里编写滚动到底部后的逻辑
            print('网页已滚动至底部');
            // 比如触发加载更多、显示提示弹窗等
          }
        },
      )
      // 加载目标网页（或本地HTML）
      ..loadRequest(Uri.parse('https://example.com'))
      // 注入滚动监听的JS代码
      ..runJavaScript('''
        window.addEventListener('scroll', () => {
          const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
          const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
          const totalHeight = document.documentElement.scrollHeight;
          // 设置20px阈值，避免因浏览器计算精度问题误触发
          if (scrollTop + viewportHeight >= totalHeight - 20) {
            window.$_bottomChannel.postMessage('reachedBottom');
          }
        });
      ''');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('WebView 滚动检测')),
      body: WebViewWidget(controller: _controller),
    );
  }
}

二、使用 flutter_inappwebview 插件 #

这个第三方插件功能更丰富，自带滚动事件回调，无需手动注入JS，直接通过onScrollChanged就能获取滚动参数：

1. 初始化InAppWebView，设置onScrollChanged回调
2. 在回调中获取当前滚动位置、网页内容高度和视口高度，判断是否到达底部

代码示例 #

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

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

  @override
  State<InAppWebViewBottomDetector> createState() => _InAppWebViewBottomDetectorState();
}

class _InAppWebViewBottomDetectorState extends State<InAppWebViewBottomDetector> {
  late InAppWebViewController _webController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('InAppWebView 滚动检测')),
      body: InAppWebView(
        initialUrlRequest: URLRequest(url: Uri.parse('https://example.com')),
        onWebViewCreated: (controller) => _webController = controller,
        onScrollChanged: (controller, x, y) async {
          // 获取网页总内容高度
          final contentHeight = await controller.getContentHeight();
          // 获取WebView视口高度
          final viewportHeight = await controller.getViewportHeight();
          
          if (contentHeight != null) {
            // 同样加入阈值避免频繁触发
            if (y + viewportHeight >= contentHeight - 20) {
              print('网页已滚动至底部');
              // 处理底部逻辑
            }
          }
        },
      ),
    );
  }
}

注意事项 #

• 阈值设置：建议添加20px左右的阈值，因为不同浏览器对scrollHeight的计算可能存在细微差异，避免因滚动到接近底部时频繁触发事件
• 防抖处理：如果需要防止连续触发，可以用Timer做防抖，比如设置300ms延迟，确保只执行一次逻辑
• 动态内容适配：如果网页存在懒加载的动态内容，需要在内容加载完成后重新计算高度，或者确保滚动监听在内容更新后依然生效

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