React Virtualized InfiniteLoader/Grid：如何防止滚动重置？答案

【问题标题】：React Virtualized InfiniteLoader/Grid: How Can I Prevent Scroll Reset?React Virtualized InfiniteLoader/Grid：如何防止滚动重置？
【发布时间】：2017-07-04 18:41:07
【问题描述】：

我有一个由 React Virtualized 的 InfiniteLoader 和 Grid 组件构建的无限滚动组件。如果我使用鼠标滚轮向下滚动（即相当缓慢），一切都会很好。但是，当我单击组件内的滚动条并将其向下拖动（移动得更快）时，我永远不会将其拖到底部。相反，在向下滚动一定百分比后，滚动条会突然跳回顶部。

我尝试在Grid 中添加console.log 语句，但它们所显示的只是event.target.scrollTop 从非常高的第一时刻变为0 下一个时刻。但我想不通的是为什么event.target.scrollTop突然变成0，而我在浏览器中所做的只是向下移动鼠标（同时按住左键）。

有没有人知道我可以如何修复，甚至只是调试这个问题？

【问题讨论】：

我们在开发 DataGrid 产品时遇到了类似的问题 - reactdatagrid.com - 至少对我们来说，这是我们代码中某些内容的结果 - 在您的事件处理程序中放置一个条件断点，只有在 scrollTop 时才会命中为 0 并查看调用堆栈 - 可能会有所帮助。

标签： react-virtualized

【解决方案1】：

这原来是用户错误。

InfiniteLoader 和 Grid 都采用 rowCount 属性，但两者的值非常不同。 InfiniteLoader 需要 rowCount 的 numItems，但 Grid 需要 rowCount 的 Math.ceil(numItems/columnCount)。我通过为两者使用InfiniteLoader 版本“修复”了一个单独的问题，但我真正需要做的是为它们传递不同的值。

一旦我弄清楚这一点并将两者设置为不同的值，奇怪的滚动重置就消失了。尽管在 React Virtualized 源代码中倾注了相当长的一段时间，但我仍然无法弄清楚当超过 rowCount 时，它会在哪里导致目标为 scrollTop 或 0 的事件发生。哦，好吧。

【讨论】：

两者都可以传递相同的rowCount 值。您的 cellRenderer 只需要处理未加载的行（即超出本地加载列表大小的索引）。
很抱歉收到一篇旧帖子@bvaughn，但您能再解释一下吗？我的 cellRenderer 确实处理了未加载的行，但我仍然遇到这个问题。这可能是 cellRangeRenderer 中的东西吗？
更新 - 我的问题实际上似乎与包装所有内容的 ArrowKeyStepper 相关，它导致 Grid 在一次滚动多个项目时快速回到活动行。