Blazor WebAssembly：能否在OnAfterRenderAsync前设置页面滚动位置？

针对你遇到的SPA页面返回/进入时滚动位置默认置顶、需要手动调整的问题，以下是几种可以避免可见跳转的实用方案：

方案1：先隐藏内容，滚动完成后再显示 #

核心思路是让用户看不到从顶部跳转到目标位置的过程，通过CSS先隐藏页面内容，滚动到位后再显示。

实现步骤： #

1. 在页面组件根元素添加初始隐藏的CSS类
2. 在组件首次渲染完成后（OnAfterRenderAsync）调用JS方法滚动到目标位置
3. 滚动完成后移除隐藏类，显示内容

组件代码：

@page "/items"
@inject IJSRuntime JSRuntime
@inject NavigationManager NavManager

<div class="@contentVisibilityClass">
    <!-- 页面列表内容 -->
    @foreach (var item in Items)
    {
        <div id="item-@item.Id" class="item-card">@item.Name</div>
    }
</div>

@code {
    private string contentVisibilityClass = "content-hidden";
    private List<Item> Items { get; set; } = new();

    protected override async Task OnInitializedAsync()
    {
        // 模拟加载数据
        await Task.Delay(400);
        Items = GetSampleItems();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 从URL锚点或共享服务获取目标位置
            var targetElementId = NavManager.Uri.Split('#').LastOrDefault();
            
            if (!string.IsNullOrEmpty(targetElementId))
            {
                await JSRuntime.InvokeVoidAsync("scrollToTargetElement", targetElementId);
            }
            // 若要恢复滚动坐标，替换为：
            // await JSRuntime.InvokeVoidAsync("window.scrollTo", 0, SavedScrollY);

            // 滚动完成后显示内容
            contentVisibilityClass = "";
            StateHasChanged();
        }
    }

    private List<Item> GetSampleItems()
    {
        // 生成示例数据
        return Enumerable.Range(1, 50).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();
    }

    private class Item { public int Id { get; set; } public string Name { get; set; } = ""; }
}

CSS样式（添加到wwwroot/css/app.css）：

.content-hidden {
    visibility: hidden;
    /* 可选：用透明度过渡实现更平滑的显示效果 */
    /* opacity: 0;
    transition: opacity 0.3s ease; */
}

JS方法（添加到wwwroot/index.html的<script>标签中）：

window.scrollToTargetElement = function(elementId) {
    const target = document.getElementById(elementId);
    if (target) {
        target.scrollIntoView({ behavior: 'instant' });
    }
};

方案2：导航时保存滚动位置，返回时恢复 #

适合从详情页返回列表页的场景，通过共享服务保存滚动状态，返回时直接恢复。

实现步骤： #

1. 创建共享服务存储滚动位置/目标元素ID
2. 在列表页监听滚动事件，实时保存当前位置
3. 从详情页返回时，读取保存的状态并滚动到目标位置

共享服务代码：

public class ScrollStateService
{
    public int LastScrollY { get; set; }
    public string TargetElementId { get; set; } = string.Empty;
}

注册服务（Program.cs）：

builder.Services.AddScoped<ScrollStateService>();

列表页组件关键代码：

@inject ScrollStateService ScrollService
@inject IJSRuntime JSRuntime

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 恢复滚动位置
            if (ScrollService.LastScrollY > 0)
            {
                await JSRuntime.InvokeVoidAsync("window.scrollTo", 0, ScrollService.LastScrollY);
            }
            else if (!string.IsNullOrEmpty(ScrollService.TargetElementId))
            {
                await JSRuntime.InvokeVoidAsync("scrollToTargetElement", ScrollService.TargetElementId);
            }

            // 监听滚动事件，实时保存位置
            await JSRuntime.InvokeVoidAsync("setupScrollMonitor", DotNetObjectReference.Create(this));
        }
    }

    [JSInvokable]
    public void UpdateScrollPosition(int scrollY)
    {
        ScrollService.LastScrollY = scrollY;
    }
}

详情页返回按钮代码：

@page "/item/{Id:int}"
@inject ScrollStateService ScrollService
@inject NavigationManager NavManager

<button @onclick="ReturnToList">返回列表</button>

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

    private void ReturnToList()
    {
        // 设置要定位的元素ID（比如当前编辑的项）
        ScrollService.TargetElementId = $"item-{Id}";
        NavManager.NavigateTo("/items");
    }
}

补充JS代码：

window.setupScrollMonitor = function(dotNetRef) {
    window.addEventListener('scroll', () => {
        dotNetRef.invokeMethodAsync('UpdateScrollPosition', window.scrollY);
    });
};

方案3：禁用浏览器自动滚动恢复 #

Blazor默认会重置滚动位置，可通过浏览器API禁用自动恢复，配合自定义逻辑控制：

在wwwroot/index.html的<script>标签中添加：

window.history.scrollRestoration = 'manual';

此设置可避免浏览器默认的滚动行为干扰自定义的滚动恢复逻辑，建议和方案2配合使用。

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