是否可以在 Blazor WebAssembly 应用程序中的 OnAfterRenderAsync 之前设置滚动位置？

Question

在 Blazor WebAssembly 应用程序中，我想在页面完全呈现之前设置滚动位置。据我所知，在单页应用程序（SPA）中，DOM是动态创建的，滚动位置默认为顶部。但是，如果我在查看详细信息或编辑记录后进入或返回页面时需要将视图定位在特定区域，这可能会造成稍微尴尬的用户体验。目前，用户看到页面加载，然后滚动到所需的部分。

有没有办法在 Blazor WebAssembly 中渲染之前设置滚动位置，或任何其他技术来防止这种可见的跳跃？

感谢您分享任何建议或替代解决方案！

Answer 1

blazor 中没有内置的方法来获取/设置滚动位置。您可以尝试在导航之前执行以下 js 互操作示例注册方法来保存位置。离开页面时丢弃寄存器。
安装

Blazored.SessionStorage

。

builder.Services.AddBlazoredSessionStorage();

@page "/"

@using Blazored.SessionStorage
@inject NavigationManager NAVI
@inject IJSRuntime JS
@inject ISessionStorageService SessionStorage

@for(int i = 0; i < 30; i++)
{
    <p >@i</p>
}
<script>
    function getPosition() {
        return window.scrollY;
    };

    function setPosition(y) {
        window.scrollTo(0, y);
    };
</script>

@code {

    private IDisposable? _locationChangingRegistration;

    protected override async Task OnInitializedAsync()
    {
        _locationChangingRegistration=NAVI.RegisterLocationChangingHandler(OnLocationChanging);
        var scrollPosition = await SessionStorage.GetItemAsync<int>("position");
        if (scrollPosition == null)
        {
            scrollPosition = 0;
        }
        await JS.InvokeVoidAsync("setPosition", scrollPosition);
    }

    private async ValueTask OnLocationChanging(LocationChangingContext context)
    {
        var scrollPosition = await JS.InvokeAsync<int>("getPosition");

        await SessionStorage.SetItemAsync<int>("position", scrollPosition);
        _locationChangingRegistration.Dispose();

    }
}