Blazor WebAssembly Virtualize表格：滚动到指定@key条目、获取可见项方法

问题1：滚动到指定@key对应的条目 #

Blazor 原生Virtualize组件内置ScrollToItemIndex方法可以直接实现滚动定位，操作步骤如下：

1. 给Virtualize组件声明引用，方便后端调用方法
2. 如果你绑定的@key就是数据源的索引（和你示例中用context.Index作为@key的场景一致），直接把目标key作为索引传入方法即可；如果是业务自定义唯一key，先从数据源中查询到对应条目的索引再传入。

示例代码：

<!-- 给Virtualize加ref引用，绑定滚动事件可选 -->
<Virtualize @ref="VirtualizeRef" Items="@forecasts">
    <tr @key="context.Index">
        <td>@context.Index</td>
        <td>@context.Date.ToShortDateString()</td>
        <td>@context.TemperatureC</td>
        <td>@context.TemperatureF</td>
        <td>@context.Summary</td>
    </tr>
</Virtualize>

<button @onclick="()=>ScrollToByKey(20)">滚动到Index为20的条目</button>

@code {
    private Virtualize<WeatherForecast>? VirtualizeRef;
    private List<WeatherForecast> forecasts = default!;

    private async Task ScrollToByKey(int targetKey)
    {
        if(VirtualizeRef == null) return;
        // 第二个参数控制条目对齐位置，可选ScrollToAlignment.Start（顶部对齐）/End（底部对齐）/Center（居中）
        await VirtualizeRef.ScrollToItemIndex(targetKey, ScrollToAlignment.Center);
    }

    // 如果@key是业务自定义唯一值，先查对应索引再滚动
    private async Task ScrollToByBusinessKey(Guid businessKey)
    {
        if(VirtualizeRef == null) return;
        var targetIndex = forecasts.FindIndex(f=>f.BusinessId == businessKey);
        if(targetIndex >=0)
        {
            await VirtualizeRef.ScrollToItemIndex(targetIndex);
        }
    }
}

注意：初始化阶段调用滚动方法需要放在OnAfterRenderAsync生命周期中执行，确保组件已经渲染完成。

问题2：查询当前可视区域所有条目的@key #

Virtualize组件公开了VisibleItems属性，直接返回当前可视区域内的所有条目对象，遍历取出对应@key即可。如果需要滚动时实时更新，可以绑定OnScroll事件触发查询。

示例代码：

<Virtualize @ref="VirtualizeRef" Items="@forecasts" OnScroll="OnScrollHandler">
    <tr @key="context.Index">
        <!-- 单元格内容省略 -->
    </tr>
</Virtualize>

<div>当前可视区域的key列表：@string.Join(",", CurrentVisibleKeys)</div>

@code {
    private Virtualize<WeatherForecast>? VirtualizeRef;
    private List<WeatherForecast> forecasts = default!;
    private List<int> CurrentVisibleKeys { get; set; } = new();

    private void OnScrollHandler(ScrollEventArgs args)
    {
        CurrentVisibleKeys.Clear();
        if(VirtualizeRef?.VisibleItems == null) return;
        foreach(var item in VirtualizeRef.VisibleItems)
        {
            // 取出你绑定的@key对应的属性即可
            CurrentVisibleKeys.Add(item.Index);
        }
    }
}

如果你的场景是使用自定义ItemsProvider加载数据而非直接绑定Items属性，VisibleItems属性依然可以正常使用，不需要调整查询逻辑。

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