如何阻止Blazor WASM导航新页面时的平滑滚动 避免无限加载触发异常

Blazor页面导航滚动问题解决方案 #

原生支持情况

Blazor从.NET 6版本开始提供了原生的滚动行为配置，可直接禁用导航时的平滑滚动效果，不需要额外Hack处理：

1. 全局配置所有导航默认滚动行为，在Program.cs中添加如下配置：

builder.Services.AddRouting(options =>
{
    options.ScrollBehavior = NavigationScrollBehavior.Instant;
});

2. 单次导航指定滚动行为，调用NavigationManager.NavigateTo时传入NavigationOptions参数：

NavManager.NavigateTo("/target-page", new NavigationOptions
{
    ScrollBehavior = NavigationScrollBehavior.Instant
});

如果你的项目仍在使用.NET 5版本，没有原生的滚动行为配置，可以通过以下方案解决问题： #

.NET 5兼容方案

问题的核心根源是两点：旧页面的全局滚动事件监听没有在导航启动时及时移除，导致滚动重置过程中仍然会触发feed流加载逻辑；组件Dispose生命周期晚于新页面初始化，销毁前的清理操作无法拦截导航过程中的事件回调。

第一步：监听导航启动事件提前清理资源

在feed流组件中监听NavigationManager.LocationChanging事件，该事件会在导航开始、新页面初始化前触发，是清理旧页面资源的最早时机：

[Inject]
private NavigationManager NavManager { get; set; }
private bool _isComponentActive = true;

protected override void OnInitialized()
{
    NavManager.LocationChanging += OnLocationChanging;
    InitEndOfPageDetection();
    base.OnInitialized();
}

private void OnLocationChanging(object sender, LocationChangingEventArgs e)
{
    // 立即移除滚动事件监听
    ((IJSInProcessRuntime)JSRuntime).InvokeVoid("removeEndOfPageDetector");
    _isComponentActive = false;
    // 立即重置滚动位置
    ((IJSInProcessRuntime)JSRuntime).InvokeVoid("setScrollPosition", 0);
}

// 清理事件监听避免内存泄漏
public async ValueTask DisposeAsync()
{
    NavManager.LocationChanging -= OnLocationChanging;
    objRef?.Dispose();
    _data?.Clear();
    _data = null;
}

第二步：调整JS滚动监听实现，支持动态移除

将原来直接赋值window.onscroll的实现改为addEventListener方式，避免覆盖其他滚动监听，同时添加移除方法：

let scrollHandler = null;
function isEndOfPage() {
    const tresholdPx = 300;
    return (window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - tresholdPx;
}

function initEndOfPageDetector(instance) {
    scrollHandler = function () {
        if (isEndOfPage()) {
            instance.invokeMethodAsync('EndOfPageReached');
        }
    };
    window.addEventListener('scroll', scrollHandler);
}

function removeEndOfPageDetector() {
    if (scrollHandler) {
        window.removeEventListener('scroll', scrollHandler);
        scrollHandler = null;
    }
}

function setScrollPosition(scrollPosition) {
    window.scrollTo({ top: scrollPosition, left: 0, behavior: 'instant' })
}

第三步：增加回调有效性判断

在EndOfPageReached方法中增加组件激活状态校验，避免导航过程中触发无效的数据加载：

[JSInvokable]
public void EndOfPageReached()
{
    lock (_lock)
    {
        if (!_isComponentActive || _isEndOfPageReached)
        {
            return;
        }
        _isEndOfPageReached = true;
        _ = LoadMoreDataAsync();
    }
}

其他SPA框架默认行为

• React：默认不会在路由切换时自动重置滚动位置，也没有内置平滑滚动动画，滚动重置逻辑需要开发者手动实现，不会出现同类问题。
• Angular：默认同样不会自动处理路由切换的滚动位置，从Angular 6开始提供scrollPositionRestoration配置项，需要开发者手动开启，默认状态下不会触发平滑滚动导致的异常逻辑。

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