页面加载时如何将MudBlazor DataGrid滚动到底部？

你的问题核心是没找对MudDataGrid的实际滚动容器——当开启Virtualize=true时，外层带id的div并非滚动载体，而是内部的虚拟滚动容器负责滚动。以下是具体解决方案：

步骤1：修改Blazor组件逻辑 #

用Blazor的OnAfterRenderAsync生命周期钩子替代window.onload，确保组件渲染完成后再操作DOM，同时注入IJSRuntime执行JS互操作：

@inject IJSRuntime JSRuntime
@inject NavigationManager NavManager

<MudDataGrid id="workoutPickerGrid" Dense=true T="Workout" Items="@data.Workouts.MyWorkouts" 
             Breakpoint="Breakpoint.None" Filterable="true" Virtualize="true" 
             HeaderClass="d-none" Height="100%" Style="height:100%" ShowColumnOptions="false">
    <ChildRowContent>
        <div class="d-flex justify-space-between align-center" @onclick=@(()=>NavManager.NavigateTo($"/Workouts/View/{context.Item.ID}"))>
            <MudText Typo="Typo.subtitle2">@context.Item.Name</MudText>
            <MudText Typo="Typo.body2">@context.Item.StartedAt.GetTimeSinceString()</MudText>
        </div>
        <MudText Typo="Typo.body2">@context.Item.StartedAt.ToLongDateString()</MudText>
    </ChildRowContent>
</MudDataGrid>

@code {
    // 替换为你的实际数据模型类型
    [Parameter] public YourDataModel data { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 短暂延迟确保虚拟列表内容加载完成（可根据实际情况调整时长）
            await Task.Delay(100);
            await JSRuntime.InvokeVoidAsync("scrollToGridBottom", "workoutPickerGrid");
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

步骤2：编写目标JS函数 #

在项目的wwwroot/js/app.js（或组件内的<script>标签）中添加以下函数，精准定位到MudDataGrid的滚动容器：

window.scrollToGridBottom = function(gridId) {
    const grid = document.getElementById(gridId);
    if (!grid) return;

    // Virtualize=true时的滚动容器：.mud-virtualize
    const virtualScrollContainer = grid.querySelector('.mud-data-grid-virtualize .mud-virtualize');
    if (virtualScrollContainer) {
        virtualScrollContainer.scrollTop = virtualScrollContainer.scrollHeight;
        return;
    }

    // 未开启Virtualize时的备用滚动容器：.mud-data-grid-content
    const normalScrollContainer = grid.querySelector('.mud-data-grid-content');
    if (normalScrollContainer) {
        normalScrollContainer.scrollTop = normalScrollContainer.scrollHeight;
    }
};

关键说明 #

• 当Virtualize=true时，MudDataGrid会生成.mud-virtualize类的元素作为虚拟滚动容器，这才是控制滚动条的核心元素
• 使用OnAfterRenderAsync而非window.onload，是因为Blazor组件的DOM渲染时机晚于全局window.onload，确保操作时元素已存在
• 若数据加载存在延迟，可调整Task.Delay的时长，或监听MudDataGrid的ItemsChanged事件，待数据完全加载后再执行滚动操作

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