Flutter Web端WebView出现多滚动条，如何仅保留单个滚动条？

核心原因 #

Web端出现多滚动条，是因为WebView自身的滚动逻辑和Flutter布局容器的滚动同时生效，形成了双重滚动冲突。移动端因WebView组件默认配置或系统特性，不会触发这类冲突。

解决方案 #

方案1：禁用WebView内部滚动，使用Flutter统一滚动 #

这是最可靠的解决方式，让Flutter的滚动组件接管整个内容区域的滚动，WebView仅负责渲染内容。

具体修改步骤：

1. 关闭WebView自带滚动：在PlatformWebViewWidgetCreationParams中添加scrollingEnabled: false参数，禁用WebView内部的滚动功能。
2. 用SingleChildScrollView包裹内容列：将原来的Column外层套上SingleChildScrollView，同时移除Expanded（SingleChildScrollView不需要子组件强制占满剩余空间）。

修改后的关键代码片段：

// 替换原Stack中包含Column的子组件部分
SingleChildScrollView(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: TextWidget(
          args?.category.name,
          color: darkGreyColor,
        ),
      ),
      TextWidget(
        args?.article.title.rendered.stripHtml,
        styling: FontStyling.bold,
        color: darkGreyColor,
      ).paddingOnly(left: 12.sp, right: 12.sp),
      TextWidget(
        '${args?.article.date != null ? DateTime.parse(args!.article.date).toYYYYMMDDHHMM : ''} By ${args?.article.author}',
        color: darkGreyColor,
      ).paddingOnly(left: 12.sp, top: 12.sp),
      const Divider(thickness: 1, indent: 8, endIndent: 8),
      // Web端WebView配置
      kIsWeb
          ? SizedBox(
              width: double.infinity,
              child: PlatformWebViewWidget(
                PlatformWebViewWidgetCreationParams(
                  controller: _pWebcontroller,
                  scrollingEnabled: false, // 禁用内部滚动
                ),
              ).build(context),
            ).paddingOnly(left: 8.sp, right: 8.sp)
          : WebViewWidget(
              controller: controller,
            ).paddingOnly(left: 8.sp, right: 8.sp),
    ],
  ),
),

方案2：禁止网页内容自身滚动（可选） #

如果网页本身存在独立的滚动容器（比如固定高度的区域），可以通过注入JavaScript强制禁止网页滚动：

// 在WebView页面加载完成后执行
_pWebcontroller.runJavaScript('document.body.style.overflow = "hidden";');

注意：这种方式可能导致网页内容被截断，仅适合网页高度能完全适配WebView的场景。

效果验证 #

修改后运行Web端，整个文章区域（标题、日期、WebView内容）会共用一个滚动条，彻底解决多滚动条问题。

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