Blazor联系人列表页滚动位置异常同步至详情页问题咨询

原因分析 #

这是浏览器自动滚动恢复行为导致的：当你在列表页滚动到下方并点击联系人时，浏览器会记录当前视口的滚动位置；导航到详情页后，浏览器尝试恢复该位置，但由于两个页面的DOM结构、元素高度完全不同，最终错误地滚动到了详情页底部。点击第一条记录时列表页未滚动，所以详情页保持顶部。

解决方案 #

方案1：详情页强制滚动到顶部

在详情页注入IJSRuntime，并在组件首次渲染后执行滚动到顶部的JS代码：

修改详情页代码：

@page "/contact-detail/{id:guid}"
@rendermode InteractiveServer
@using AutoMapper
@inject ContactService ContactService
@inject IMapper Mapper
@inject NavigationManager Navigation
@inject IJSRuntime JS <!-- 添加注入 -->

<!-- 其余页面内容不变 -->

@code {
    [Parameter]
    public Guid Id { get; set; }

    private Contact contact = new();

    protected override async Task OnInitializedAsync()
    {
        contact = await ContactService.GetContactByIdAsync(Id);
    }

    // 添加滚动逻辑
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("window.scrollTo", 0, 0);
        }
    }

    // 其余代码不变
}

方案2：导航时禁用滚动位置保留

修改列表页的EditContact方法，使用NavigationOptions明确禁止保留滚动位置：

private void EditContact(Guid id)
{
    Navigation.NavigateTo($"/contact-detail/{id}", new NavigationOptions { PreserveScrollPosition = false });
}

方案3：全局禁用滚动位置恢复（可选）

如果希望所有页面导航都不保留滚动位置，可在Program.cs中配置：

builder.Services.AddServerSideBlazor(options =>
{
    options.DisableAutoScrollOnNavigation = true;
});

验证 #

完成上述任一修改后，无论列表页滚动到什么位置，点击联系人进入详情页时，页面都会保持在顶部。

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