Flutter WebView滚动控制问题：需禁止滚动仅保留横向滚动但失效

要实现这个需求，核心是同时控制WebView自身的物理滚动和网页内部的滚动行为，以下是具体实现步骤：

1. 关闭WebView自身的物理滚动 #

将WebView的scrollPhysics设置为NeverScrollableScrollPhysics，让网页内部的滚动逻辑接管，避免WebView自身的滚动干扰：

WebViewWidget(
  controller: _controller,
  scrollPhysics: const NeverScrollableScrollPhysics(),
)

2. 注入JavaScript控制网页滚动行为 #

通过WebViewController注入JS代码，禁止页面纵向滚动、允许横向滚动，同时阻止移动端的纵向触摸滚动事件：

完整代码示例 #

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

class HorizontalOnlyWebView extends StatefulWidget {
  final String targetUrl;
  const HorizontalOnlyWebView({super.key, required this.targetUrl});

  @override
  State<HorizontalOnlyWebView> createState() => _HorizontalOnlyWebViewState();
}

class _HorizontalOnlyWebViewState extends State<HorizontalOnlyWebView> {
  late final WebViewController webController;

  @override
  void initState() {
    super.initState();
    webController = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse(widget.targetUrl))
      // 注入滚动控制的JS代码
      ..runJavaScript('''
        // 全局设置：禁止纵向滚动，允许横向滚动
        document.body.style.overflowY = 'hidden';
        document.body.style.overflowX = 'auto';

        // 阻止纵向方向的touchmove事件，防止移动端滑动触发纵向滚动
        document.addEventListener('touchmove', function(e) {
          if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
            e.preventDefault();
          }
        }, { passive: false });

        // 监听DOM变化，确保动态加载的元素也应用滚动限制
        const domObserver = new MutationObserver(() => {
          document.body.style.overflowY = 'hidden';
          document.body.style.overflowX = 'auto';
        });
        domObserver.observe(document.body, { childList: true, subtree: true });
      ''');
  }

  @override
  Widget build(BuildContext context) {
    return WebViewWidget(controller: webController, scrollPhysics: const NeverScrollableScrollPhysics());
  }
}

关键注意事项 #

• 必须开启JavaScript模式（JavaScriptMode.unrestricted），否则注入的JS代码无法生效。
• 如果网页内存在独立的滚动容器（比如带自定义滚动的div），需要在JS代码中针对这些容器单独设置overflowY: 'hidden', overflowX: 'auto'。
• 部分网页可能有自己的触摸事件处理逻辑，需要根据实际情况调整JS中的事件拦截规则。

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