如何在MAUI中禁用WebView滚动，实现与CollectionView共用滚动条

要让WebView和CollectionView共用同一个外层ScrollView，核心是禁用WebView自身的滚动行为，同时确保WebView高度自适应内容，让外层ScrollView接管整个滚动逻辑。以下是具体实现步骤：

一、禁用WebView的原生滚动 #

MAUI的WebView依赖各平台原生控件，需要针对Android和iOS分别处理：

Android平台 #

创建自定义WebViewHandler，修改原生WebView的滚动属性：

using Microsoft.Maui.Handlers;
using Android.Webkit;

namespace YourAppNamespace.Platforms.Android;

public class CustomWebViewHandler : WebViewHandler
{
    protected override void ConnectHandler(Android.Webkit.WebView platformView)
    {
        base.ConnectHandler(platformView);
        // 取消WebView作为滚动容器的身份，让外层ScrollView接管
        platformView.SetScrollContainer(false);
        // 隐藏垂直滚动条并禁用自身滚动
        platformView.VerticalScrollBarEnabled = false;
        platformView.ScrollBarStyle = ScrollbarStyles.OutsideOverlay;
    }
}

在MauiProgram.cs中注册该Handler：

builder.ConfigureMauiHandlers(handlers =>
{
#if ANDROID
    handlers.AddHandler<WebView, CustomWebViewHandler>();
#endif
});

iOS平台 #

同样创建自定义Handler，禁用WKWebView的滚动：

using Microsoft.Maui.Handlers;
using WebKit;

namespace YourAppNamespace.Platforms.iOS;

public class CustomWebViewHandler : WebViewHandler
{
    protected override void ConnectHandler(WKWebView platformView)
    {
        base.ConnectHandler(platformView);
        // 禁用WKWebView的滚动功能
        platformView.ScrollView.ScrollEnabled = false;
        // 禁止滚动到边界时的回弹效果
        platformView.ScrollView.Bounces = false;
    }
}

注册到MauiProgram.cs：

builder.ConfigureMauiHandlers(handlers =>
{
#if IOS
    handlers.AddHandler<WebView, CustomWebViewHandler>();
#endif
});

二、让WebView高度自适应HTML内容 #

只有WebView高度匹配实际内容，外层ScrollView才能正确计算总滚动高度。通过注入JavaScript获取页面高度：

1. 在ViewModel中添加绑定属性：

private double _webViewHeight;
public double WebViewHeight
{
    get => _webViewHeight;
    set => SetProperty(ref _webViewHeight, value); // 假设使用了MVVM框架的属性变更通知
}

2. 在XAML中绑定WebView的HeightRequest，并监听Navigated事件：

<WebView x:Name="WebView" 
         Source="{Binding Source}" 
         HeightRequest="{Binding WebViewHeight}"
         Navigated="WebView_Navigated" />

3. 后台代码中注入JS获取高度：

private async void WebView_Navigated(object sender, WebNavigatedEventArgs e)
{
    if (sender is not WebView webView) return;
    
    // 执行JS获取HTML文档的实际高度
    var heightStr = await webView.EvaluateJavaScriptAsync("document.body.scrollHeight");
    if (double.TryParse(heightStr, out double height))
    {
        // 增加少量余量避免内容截断
        ((YourViewModel)BindingContext).WebViewHeight = height + 20;
    }
}

三、调整布局结构 #

用VerticalStackLayout包裹WebView和CollectionView，确保两者垂直排列并被外层ScrollView包含：

<ContentPage>
    <ScrollView>
        <VerticalStackLayout Spacing="0">
            <WebView x:Name="WebView" 
                     Source="{Binding Source}" 
                     HeightRequest="{Binding WebViewHeight}"
                     Navigated="WebView_Navigated" />

            <CollectionView ItemsSource="{Binding Comments}" 
                            Margin="0,10,0,0">
                <!-- 这里定义你的评论列表ItemTemplate -->
            </CollectionView>
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

注意事项 #

• 不要给CollectionView设置固定HeightRequest，让它自适应内容高度。
• 不同平台WebView可能默认带有内边距，可通过自定义Handler调整原生控件的Padding属性优化显示。

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