Blazor WASM中Virtualize组件双列布局滚动加载异常问题

问题出在你把grid布局直接应用到了滚动容器上，导致Virtualize组件无法正确感知视口和滚动位置，进而无法触发后续数据加载。Virtualize组件需要直接作为滚动容器的子元素，并且自身负责内部项的布局。

修正后的代码示例 #

<div style="height: 500px; overflow-y: scroll;">
    <Virtualize Items="@employees" 
                style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;"
                ItemSize="250"> <!-- 可选：设置卡片预估高度，提升虚拟滚动计算精度 -->
        <div class="card">
            <img src="@context.Image" />
            <div class="name">@context.Name</div>
        </div>
    </Virtualize>
</div>

关键调整说明 #

• 将display: grid等布局样式从父滚动容器移到Virtualize组件本身，让Virtualize成为grid容器，内部的员工卡片作为grid子项实现双列布局
• 父容器仅保留滚动相关样式（固定高度+overflow-y: scroll），确保Virtualize能正确检测滚动事件和视口范围
• 可选添加ItemSize属性：如果卡片高度固定或可预估，设置该属性能帮助Virtualize更精准地计算需要渲染的项数，避免滚动时出现空白或加载异常

原代码失效原因 #

原结构中，滚动容器作为grid容器，Virtualize仅作为grid的单个单元格存在，其内部的卡片无法形成双列布局，同时Virtualize的高度被grid单元格限制，导致组件无法正确计算视口内的项数和滚动触发时机，最终无法加载后续数据。

内容的提问来源于stack exchange，提问作者echo-4droid