Blazor MAUI Hybrid应用中window相关JS功能与事件失效，滚动位置保存恢复功能无法实现

我明白你在Blazor MAUI Hybrid里保存恢复页面滚动位置时遇到的这些问题，咱们一步步来拆解解决：

首先解决window.scrollTop is not a function的错误 #

你这里的核心问题是对JS的滚动API用错了：window对象并没有scrollTop()方法，scrollTop是DOM元素的属性，而设置滚动位置需要用window.scrollTo()方法或者直接修改元素的scrollTop属性。

正确的滚动位置获取和设置方式应该是：

• 获取滚动位置：用document.documentElement.scrollTop || document.body.scrollTop（兼容不同浏览器的渲染模式）
• 设置滚动位置：用window.scrollTo(0, 滚动值)，或者document.documentElement.scrollTop = 滚动值

然后解决事件不触发的问题 #

在Blazor MAUI Hybrid这类单页应用里，onbeforeunload事件几乎不会在客户端导航（比如用NavigationManager跳转页面）时触发——因为这种导航不会真正卸载浏览器页面，只是Blazor内部切换组件。所以得改用Blazor原生的导航事件来处理。

另外，Blazor组件里直接写<script>标签是不推荐的写法，这类脚本可能不会被正确执行，建议把JS逻辑放在wwwroot/index.html里，或者用JS隔离的方式。

最后优化：按页面独立保存滚动位置 #

你之前用同一个scrollPosition作为存储key，会导致不同页面的滚动位置互相覆盖，最好按页面的相对路径作为key来存储。

完整的修正示例 #

1. 在wwwroot/index.html中添加JS工具函数

把滚动相关的逻辑封装成全局对象，避免污染全局作用域：

window.scrollPositionUtils = {
    // 按页面路径保存滚动位置
    saveScrollPosition: function(pagePath) {
        const scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
        localStorage.setItem(`scrollPos_${pagePath}`, scrollPosition);
    },
    // 按页面路径恢复滚动位置
    restoreScrollPosition: function(pagePath) {
        const savedPos = localStorage.getItem(`scrollPos_${pagePath}`);
        if (savedPos) {
            window.scrollTo(0, parseInt(savedPos));
        }
    }
};

2. 在Blazor组件中绑定导航事件并调用JS

@inject NavigationManager NavManager
@inject IJSRuntime JsRuntime
@implements IDisposable

<!-- 你的组件内容 -->

@code {
    private string _currentPagePath;

    protected override void OnInitialized()
    {
        // 记录当前页面的相对路径
        _currentPagePath = NavManager.ToBaseRelativePath(NavManager.Uri);
        // 订阅导航变更事件
        NavManager.LocationChanged += OnLocationChanged;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 组件渲染完成后，恢复当前页面的滚动位置
            await JsRuntime.InvokeVoidAsync("scrollPositionUtils.restoreScrollPosition", _currentPagePath);
        }
    }

    private async void OnLocationChanged(object sender, LocationChangedEventArgs e)
    {
        // 1. 保存上一个页面的滚动位置
        await JsRuntime.InvokeVoidAsync("scrollPositionUtils.saveScrollPosition", _currentPagePath);
        // 2. 更新当前页面路径
        _currentPagePath = NavManager.ToBaseRelativePath(e.Location);
        // 3. 恢复新页面的滚动位置
        await JsRuntime.InvokeVoidAsync("scrollPositionUtils.restoreScrollPosition", _currentPagePath);
    }

    // 取消事件订阅，避免内存泄漏
    public void Dispose()
    {
        NavManager.LocationChanged -= OnLocationChanged;
    }
}

额外注意点 #

• 如果你希望滚动位置只在会话期间保留，可以把localStorage换成sessionStorage，后者会在浏览器标签关闭后自动清除。
• 一定要在OnAfterRenderAsync里执行滚动恢复操作，因为只有组件渲染完成后，页面的DOM结构才稳定，滚动操作才能生效。
• 实现IDisposable接口取消事件订阅，是Blazor组件的最佳实践，防止内存泄漏。

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