Blazor应用中优化列表页滚动位置恢复的用户体验问题

我完全懂你现在的困扰——从详情页切回列表页时，页面先跳到顶部再弹回之前的滚动位置，这种突兀的跳动感确实拉低了用户体验。下面给你几个实用的优化方案，帮你彻底解决这个问题：

方案一：先隐藏页面，恢复滚动后再显示 #

核心思路是让列表页先处于隐藏状态，等滚动位置完全恢复后再展示给用户，这样用户就看不到中间的跳动过程了。

1. 先定义一个CSS隐藏类：

.hidden-until-scroll {
    visibility: hidden;
    /* 用visibility而不是display:none，避免页面布局重排，体验更流畅 */
}

2. 修改你的JavaScript代码，增加显示页面的逻辑：

window.restoreScrollPosition = () => {
    const scrollPosition = sessionStorage.getItem('scrollPosition');
    // 这里替换成你列表页根容器的实际ID
    const pageContainer = document.getElementById('list-page-root');
    
    if (scrollPosition) {
        window.scrollTo(0, parseInt(scrollPosition));
        sessionStorage.removeItem('scrollPosition');
    }
    // 不管有没有存储的滚动位置，最后都显示页面
    pageContainer.classList.remove('hidden-until-scroll');
};

3. 在Blazor列表页组件中配置：
   给根容器加上隐藏类，并在组件渲染完成后调用恢复方法：

<!-- 列表页根容器 -->
<div id="list-page-root" class="hidden-until-scroll">
    <!-- 你的列表内容 -->
</div>

@inject IJSRuntime JSRuntime

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        // 渲染完成后恢复滚动并显示页面
        await JSRuntime.InvokeVoidAsync("restoreScrollPosition");
    }
}

方案二：提前恢复滚动，避免初始跳顶 #

问题的根源可能是你的resetScroll方法在页面加载时被调用了，导致先跳到顶部，之后才恢复位置。可以调整逻辑，让滚动恢复更早执行：

1. 移除不必要的resetScroll调用，或者只在首次加载列表页（不是从详情页返回）时调用。

2. 把滚动恢复逻辑绑定到DOMContentLoaded事件，让页面在渲染前就定位到目标位置：

document.addEventListener('DOMContentLoaded', () => {
    const scrollPosition = sessionStorage.getItem('scrollPosition');
    if (scrollPosition) {
        window.scrollTo(0, parseInt(scrollPosition));
        sessionStorage.removeItem('scrollPosition');
    }
});

这样页面加载时会直接定位到存储的位置，不会出现先顶再跳的情况。

方案三：利用Blazor导航事件（更贴合Blazor生态） #

借助Blazor的导航生命周期事件，在离开列表页时存储位置，进入列表页时直接恢复，不需要依赖页面渲染后的JS调用：

@inject NavigationManager NavigationManager
@inject IJSRuntime JSRuntime
@implements IDisposable

protected override void OnInitialized()
{
    // 绑定导航变化事件
    NavigationManager.LocationChanged += HandleLocationChanged;
}

private async void HandleLocationChanged(object sender, LocationChangedEventArgs e)
{
    // 替换成你的列表页路由标识
    const string ListPageRoute = "/your-list-page-path";
    // 替换成你的详情页路由标识
    const string DetailsPageRoute = "/your-details-page-path";

    if (e.Location.Contains(ListPageRoute))
    {
        // 进入列表页时恢复滚动
        var scrollPos = await JSRuntime.InvokeAsync<int>("sessionStorage.getItem", "scrollPosition");
        if (scrollPos > 0)
        {
            await JSRuntime.InvokeVoidAsync("window.scrollTo", 0, scrollPos);
            await JSRuntime.InvokeVoidAsync("sessionStorage.removeItem", "scrollPosition");
        }
    }
    else if (e.Location.Contains(DetailsPageRoute))
    {
        // 跳转到详情页时存储当前滚动位置
        var currentScroll = await JSRuntime.InvokeAsync<int>("window.scrollY");
        await JSRuntime.InvokeVoidAsync("sessionStorage.setItem", "scrollPosition", currentScroll);
    }
}

public void Dispose()
{
    // 解绑事件，避免内存泄漏
    NavigationManager.LocationChanged -= HandleLocationChanged;
}

小建议 #

如果想快速见效，优先试试方案一或者方案二，改动量小，能立刻解决跳动问题；如果想让逻辑更贴合Blazor的开发模式，方案三会是更优雅的选择。

备注：内容来源于stack exchange，提问作者Rod