问题标签 [react-virtualized]

我正在使用 react-virtualized组件来同步几个固定标题的滚动——与文档ScrollSync中的示例非常相似。

我的问题：是否可以为（或其子项）提供初始scrollTop值？ScrollSync我意识到更好的方法是通过在控制滚动位置scrollToRow的组件上使用 - 为了它的价值，我正在使用它。但是因为，在垂直方向上，我只渲染一个非常高的单元格，并不能提供所需的保真度。GridscrollToColumnscrollToRow

我确实意识到这是对网格组件的轻微使用，但它作为一个水平的、无限加载的滚动条运行得非常好，同时允许我重用现有的组件。如果我可以设置一个首字母scrollTop，我会很高兴。

谢谢。

我想知道 react-virtualized 如何处理可访问性。用户似乎很难使用辅助工具导航到列表的特定部分。对于需要支持可访问性的项目来说，react-virtualized 是一个现实的选择吗？

我基本上希望使用 react-virtualized Table 来做到这一点：

https://bvaughn.github.io/react-virtualized/?component=ScrollSync#/components/ScrollSync

该演示非常完美，但它使用了不可排序的 List + Grid。

表格演示具有固定的标题和可排序性：

https://bvaughn.github.io/react-virtualized/?component=ScrollSync#/components/Table

但我基本上想要发生的是：

• 每个单元格自动扩展为他们需要的大小（不截断）
• 标题在滚动期间保持固定
• 第一列在水平滚动期间保持固定
• 可以对任何列进行升序/降序排序。

我创建了一个表格的基本 codepen 示例来开始修补：

http://codepen.io/sontek/pen/yVvdWw

如果你不想访问 codepen，这里是 JS：

我正在使用List内部和AutoSizer动态高度，并使用rowHeight. 我的用例中的行需要用省略号渲染并在单击它时展开。

我想知道rowHeight一旦行已经被渲染，如何动态设置？

当我尝试按如下方式呈现项目列表时遇到问题：

现在，当我向下滚动时，它会每隔一秒跳过一个列表项，直到我看到一半的页面是空的，但仍然可以滚动。

向上滚动时更糟糕的是，它会跳过一半页面。

AutoSizer并且CellMeasurer似乎工作正常。我稍微浏览了一下代码，看起来它们确实创建了正确的测量值。

我的数据只是一个静态对象数组。不是承诺或流。

我还更改了我的Datum组件几次以确保它是完全静态的标记，但这并没有改变任何东西。

有什么想法吗？

[编辑]

这是一个显示我的问题的 Plunker：https ://plnkr.co/edit/2YJnAt?p=preview

具有讽刺意味的是，在摆弄它时，我意外地发现了我做错了什么。我将用我的解决方案提交答案。

我的父 div 是父级的 100%（反过来又是 100%，等等），并且其中一个父级有一些填充。

AutoSizer 不尊重底部的填充，并且列表在看到所有项目之前停止滚动。

祖父母的底部填充被忽略：

行提前停止渲染：

我正在使用react-virtualized，并尝试使用该scrollToIndex功能，但在使用它时我得到一个空列表。（如果我滚动，那么我的列表会再次显示）。

这是我的代码：

如果我删除 scrollToIndex={100}，一切正常。

是否scrollToIndex适用于WindowScroller？因为我只找到了它的例子List

我需要打开/关闭其他行详细信息。

有没有人实施或有关于如何为每一行实施展开/折叠功能的想法？

我正在使用 RV List 加载具有自定义格式的大型文档。它就像一个魅力，但我遇到了以下两个问题：我目前在 cellmeasurer 中基于此
设置了一个列表来计算行的动态高度（宽度是固定的）。我设法使用 scrollToindex 找到我想要的行，但有些行非常大，我希望能够滚动到行中的特定位置。我知道我需要使用 scrollTop 来执行此操作，但我不知道如何获取当前行的顶部 + 行内 div 的偏移量以使其正确滚动到正确的位置。我看到了一个类似问题的答案，其中发布了以下代码：

这是我的代码：

我遇到的另一个问题是，虽然我将文档分成块，每个块都以标签结尾以确保文本的流畅（不重叠），但由于某种原因，文本中存在一些单元格测量器忽略的点导致重叠的行 div 的最后一行文本的高度。我还没有设法找到关于列表中重叠发生位置的一致模式。你有什么指示我如何调试这个问题：例如。单独测量给定部分并将其与 CellMeasurer 返回的测量值进行比较？

我有一个无限列表（使用组件InfiniteLoader和List来自很棒的react-virtualized库）。我想滚动到特定行以响应用户生成的事件。

这是我的代码：

但是，我收到以下错误：

当我调用该scroll_to_week方法时。

我从文档https://github.com/bvaughn/react-virtualized/blob/master/docs/reverseList.md认为这是滚动到行索引的正确方法。

谢谢你的帮助。