Blazor MAUI Hybrid页面间滚动位置持久化问题咨询

一、用.NET 8增强导航（最省心的方案） #

工作原理 #

增强导航会拦截导航请求，在客户端直接更新DOM内容，不会完全刷新页面，滚动位置会自动保留，从根源上解决闪烁问题。在Blazor MAUI Hybrid里，它依靠WebView的导航拦截机制，配合Blazor组件的生命周期管理，实现无刷新的页面切换。

启用步骤 #

1. 注册服务
   在项目的Program.cs中，给Razor组件添加增强导航服务：

   builder.Services.AddRazorComponents()
       .AddInteractiveServerComponents() // 根据项目类型选择Server/WASM
       .AddInteractiveWebAssemblyComponents()
       .AddEnhancedNavigation(); // 关键：添加这行启用增强导航
   

2. 包裹路由组件
   打开App.razor，用EnhancedNavigation把原有的Router包裹起来：

   <EnhancedNavigation>
       <Router AppAssembly="@typeof(App).Assembly">
           <!-- 原有路由内容，比如NotFound、LayoutView等 -->
       </Router>
   </EnhancedNavigation>
   

3. 正常导航即可
   使用Blazor自带的<NavLink>组件或NavigationManager.NavigateTo方法跳转页面，增强导航会自动保留滚动位置，无需额外代码。

二、优化手动恢复方案（解决闪烁问题） #

如果暂时不想用增强导航，可以调整原有方案消除闪烁：

• 延迟保存滚动位置：不在点击导航时保存，而是在页面即将卸载前（beforeunload事件）保存，确保拿到最终滚动位置：

  @inject NavigationManager NavManager
  @inject IJSRuntime JSRuntime
  @implements IDisposable
  
  @code {
      private int _savedScrollY;
      private EventHandler<LocationChangedEventArgs> _locationChangedHandler;
  
      protected override void OnInitialized()
      {
          // 监听页面返回事件，回到页面A时恢复滚动
          _locationChangedHandler = (_, args) =>
          {
              if (args.Location.EndsWith("/page-a")) // 替换为你的页面A路由
              {
                  _ = JSRuntime.InvokeVoidAsync("window.scrollTo", 0, _savedScrollY);
              }
          };
          NavManager.LocationChanged += _locationChangedHandler;
      }
  
      protected override async Task OnAfterRenderAsync(bool firstRender)
      {
          if (firstRender)
          {
              // 注册beforeunload事件保存滚动位置
              await JSRuntime.InvokeVoidAsync("window.addEventListener", "beforeunload", async () =>
              {
                  _savedScrollY = await JSRuntime.InvokeAsync<int>("window.scrollY");
              });
          }
      }
  
      public void Dispose()
      {
          NavManager.LocationChanged -= _locationChangedHandler;
      }
  }
  

• 先隐藏页面再恢复滚动：在页面A的根容器添加隐藏样式，等滚动位置恢复后再显示页面，避免闪烁：

  <div @ref="PageContainer" style="visibility: @_visibility;">
      <!-- 页面A的主从结构内容 -->
  </div>
  
  @code {
      private ElementReference PageContainer;
      private string _visibility = "hidden";
  
      protected override async Task OnAfterRenderAsync(bool firstRender)
      {
          if (!firstRender && NavManager.Uri.EndsWith("/page-a"))
          {
              // 先恢复滚动
              await JSRuntime.InvokeVoidAsync("window.scrollTo", 0, _savedScrollY);
              // 再显示页面
              await JSRuntime.InvokeVoidAsync("element.style.visibility = 'visible'", PageContainer);
              _visibility = "visible";
              StateHasChanged();
          }
      }
  }
  

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