MAUI Blazor如何禁用iOS端WebView弹性回弹效果？

问题描述 #

在iOS系统中，即便使用默认应用，整个布局仍存在滚动效果，希望将其移除。该问题并非由CSS导致（Android端无此问题），尝试使用自定义渲染器但未生效，求解决建议。

用户尝试的自定义渲染器代码 #

public class WkWebViewCustomRenderer : Microsoft.Maui.Controls.Handlers.Compatibility.ViewRenderer<BlazorWebView, WKWebView>
{
     protected override void OnElementChanged(ElementChangedEventArgs<BlazorWebView> e)
     {
         base.OnElementChanged(e);

         if (Control == null)
         {
             var config = new WKWebViewConfiguration();
             var webView = new WKWebView(Frame, config);
             webView.ScrollView.Bounces = false;
             webView.ScrollView.ScrollEnabled = false;
             SetNativeControl(webView);
         }
         if (e.NewElement != null)
         {
             Control?.LoadRequest(new NSUrlRequest(new NSUrl("https://0.0.0.0")));
         }
     }
 }

解决建议 #

1. 改用MAUI原生Handler替代兼容性渲染器 #

你当前使用的是Xamarin兼容的ViewRenderer，MAUI推荐使用原生Handler来定制控件，兼容性和稳定性更好。以下是实现步骤：

自定义BlazorWebViewHandler

using Microsoft.Maui.Handlers;
using WebKit;

namespace YourAppNamespace;

public static class BlazorWebViewHandlerExtensions
{
    public static void CustomizeBlazorWebView(this IMauiHandlersCollection handlers)
    {
        handlers.AddHandler<BlazorWebView, CustomBlazorWebViewHandler>();
    }
}

public class CustomBlazorWebViewHandler : BlazorWebViewHandler
{
    protected override void ConnectHandler(WKWebView platformView)
    {
        base.ConnectHandler(platformView);
        
        // 核心设置：禁用滚动和回弹效果
        platformView.ScrollView.ScrollEnabled = false;
        platformView.ScrollView.Bounces = false;
        // 隐藏滚动指示器（可选优化）
        platformView.ScrollView.ShowsVerticalScrollIndicator = false;
        platformView.ScrollView.ShowsHorizontalScrollIndicator = false;
    }
}

在MauiProgram中注册Handler

var builder = MauiApp.CreateBuilder();
builder
    .UseMauiApp<App>()
    .ConfigureMauiHandlers(handlers =>
    {
        // 注册自定义Handler
        handlers.CustomizeBlazorWebView();
    });

2. 延迟在页面加载完成后设置滚动属性 #

WebView加载内容后可能会重置滚动状态，可通过导航代理在页面加载完成后再次锁定：

修改CustomBlazorWebViewHandler，添加自定义导航代理：

protected override void ConnectHandler(WKWebView platformView)
{
    base.ConnectHandler(platformView);
    
    platformView.NavigationDelegate = new CustomNavigationDelegate(platformView);
}

private class CustomNavigationDelegate : WKNavigationDelegate
{
    private readonly WKWebView _webView;

    public CustomNavigationDelegate(WKWebView webView)
    {
        _webView = webView;
    }

    public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
    {
        base.DidFinishNavigation(webView, navigation);
        
        // 页面加载完成后再次禁用滚动
        _webView.ScrollView.ScrollEnabled = false;
        _webView.ScrollView.Bounces = false;
    }
}

3. 检查父布局配置 #

确保BlazorWebView的父容器（如Grid、VerticalStackLayout）没有嵌套ScrollView，且BlazorWebView的尺寸设置为填满父容器，避免因内容溢出触发系统级滚动。

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