Blazor Virtualize实现分组列表粘性表头虚拟滚动咨询

Blazor 内置 Virtualize 组件默认的滚动容器探测逻辑存在局限：它会从自身所在DOM位置向上查找，命中第一个带overflow: scroll/auto属性的父元素就认定为滚动容器，且只会计算该容器内部、自身到容器顶部的静态占位高度。
当你把滚动属性设置在顶层table-content-container时，每个分组内的Virtualize组件感知不到同属滚动容器的其他分组头、其他分组内容的占位高度，可视区域计算完全错误，最终导致虚拟滚动失效。

该效果完全可以通过Blazor原生Virtualize组件实现，核心是显式指定正确的滚动容器，避免组件自动探测错误，具体调整步骤如下：

• 保留顶层table-content-container的固定高度、overflow-y: scroll属性，给该容器添加@ref引用
• 给顶部表头添加粘性定位样式：position: sticky; top: 0; z-index: 10; background: #fff，保证滚动时表头固定在顶部不随内容滚动
• 给每个分组内的Virtualize组件设置ScrollElement参数，值为前面拿到的顶层滚动容器引用，跳过组件默认的父级滚动容器探测逻辑
• 给分组折叠/展开事件添加回调，在DOM更新完成后调用所有Virtualize实例的RefreshDataAsync()方法，强制组件重新计算可视区域范围

调整后的完整代码如下：

<div class="table-container">
    <!-- 粘性定位表头 -->
    <div class="table-header grid-row-template" 
         style="position: sticky; top: 0; z-index: 10; background: #fff;">
        <div class="header-item">Id</div>
        <div class="header-item">Name</div>
    </div>
    
    <!-- 顶层滚动容器，添加ref引用 -->
    <div class="table-content-container" 
         style="height:50vh; overflow-y:scroll"
         @ref="mainScrollContainer">
    @foreach (DataGroup group in dataGroups)
    {
        <div class="group-header">
            <MudToggleIconButton
                @bind-Toggled="@group.IsExpanded"
                Icon="@Icons.Filled.ExpandMore"
                Color="Color.Secondary"
                ToggledIcon="@Icons.Filled.ExpandLess"                
                Size="Size.Small"
                ToggledSize="Size.Small"
                ToggledChanged="OnGroupToggleChanged"/>
            <MudText Color="@Color.Primary">@group.GroupName</MudText>    
        </div>
        @if (group.IsExpanded)
        {
            <div class="group-body-container">
                <!-- 显式指定滚动容器 -->
                <Virtualize @ref="virtualizeInstances[group.GroupId]"
                            Items="group.DataRow" 
                            Context="row" 
                            ItemSize="20"
                            ScrollElement="mainScrollContainer">
                    <div class="grid-row-template data-row">
                        <div class="data-item">@row.Id</div>
                        <div class="data-item">@row.Name</div>
                    </div>
                </Virtualize>
            </div>
        }
    }
    </div>
</div>

对应的逻辑代码：

@code {
    private ElementReference mainScrollContainer;
    private Dictionary<string, Virtualize<DataRow>> virtualizeInstances = new();
    private List<DataGroup> dataGroups = new();

    private async Task OnGroupToggleChanged()
    {
        // 等待DOM更新完成后刷新虚拟滚动计算
        await Task.Delay(60);
        foreach (var instance in virtualizeInstances.Values)
        {
            await instance.RefreshDataAsync();
        }
    }
}

最终实现效果：

• ItemSize参数值必须和实际渲染的行高完全一致，否则会出现滚动位置偏移、底部白屏、渲染条目不全的问题
• 原生Virtualize仅支持固定行高场景，如果你的行高、分组头高度是动态变化的，建议使用支持动态高度的虚拟滚动组件替代
• 粘性表头必须设置不透明背景色，否则滚动时内容会从表头下方穿透显示

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