拖动滚动条时 Blazor Virtualize 组件和滚动中断

Posted 2023-03-27

【中文标题】拖动滚动条时 Blazor Virtualize 组件和滚动中断

【英文标题】：Blazor Virtualize component and broken scrolling when dragging scrollbar

【发布时间】：2021-08-18 13:00:02

【问题描述】：

我有一个带有行虚拟化的自定义数据网格。

当我通过拖动滚动条向下滚动时，滚动会中断，就像在呈现新的“页面”之前一样。

你知道为什么会发生这种情况吗？

<div class="sg-container" style="height:200px">
    <div class="simple-grid" style="grid-template-columns: 3em minmax(5em, auto); ">
        <Virtualize Items="_products" 
                    ItemSize="32">
            <ItemContent>
                <div class="sg-row sg-row ">
                    <div class="sg-cell ">@context.Id</div>
                    <div class="sg-cell ">@context.Name</div>
                </div>
            </ItemContent>
        </Virtualize>

    </div>
</div>

演示 (REPL) 在这里：https://blazorrepl.com/repl/mvkBuHuB22FVBxY258

【问题讨论】：

您的OverscanCount 设置为什么？在我看来，您并没有让它在视图区域之外加载足够数量的项目。下一个要查看的部分将是您的 ItemsProvider 逻辑，您能更新一下吗？

如果 OverscanCount 太低，就会有占位符，它们就在那里。滚动也被绑定到数组的 Items 破坏了，所以它可能不会被 ItemsProvider 破坏

当然，但是我在没有提供程序的情况下使用 ICollection 的项目成功地将 100 到 1000 个项目加载到 <tbody /> 中，没有任何闪烁、滚动问题或缺少条目。如果您使用极其简化的实现重新创建它会发生什么？

我没有使用<table> 元素。查看我的 repl 以获得最简单的 bug 演示

【参考方案1】：

理论上他们应该根据this 修复了这个错误。你的情况可能不同，所以也许值得提交一个错误，因为这对我来说绝对是一个 Blazor 错误。

【讨论】：

这是一个答案还是一个输入？

这可能是一条评论。另一方面，问题是“你知道为什么会发生这种情况吗？”，这在技术上回答了这个问题。