如何渲染列表/网格行，就好像它是粘性的？

Question

我有一个组件利用react-virtualized 的List 进行虚拟滚动，其中每一行要么是类别标题，要么是属于该类别的实际内容。所以像：

Fruits
- Strawberry
- Blueberry
- Mango
- ...etc
Grains
- Oats
- Wheat
- Rice
- ...etc

（其中Fruits 和Grains 是类别标题）

当用户滚动时，如果他们滚动过一个类别标题，我希望能够从该行中获取数据并将其呈现为“粘性”（用引号引起来，因为 position: sticky 并不是一个真正可行的选项然而）容器，粘在滚动容器的顶部，直到它们滚动超过下一个类别标题，依此类推。 （基本上，滚动浏览艺术家的方式与 iOS 音乐应用程序中的工作方式相同。）

棘手的是，我希望这个粘性标题仍然在滚动容器内，而不是覆盖它或坐在它上方，并且它需要填充其父容器的宽度，这排除了在外部渲染粘性容器List 组件的一部分，然后用 position: absolute 覆盖它。

据我所知，目前似乎用react-virtualized 做这样的事情是不可能的——因为所有的行都是绝对定位的，所以没有办法在里面创建一个“粘性”行滚动容器。绝对定位粘性标题会起作用，但前提是所有其他行都静态定位在正常文档流中。

现在是否可以使用react-virtualized 实现诸如粘性标题之类的东西？如果没有，如何让react-virtualized 支持他们？

谢谢！

Answer 1

我们对您有类似的要求 - 我们需要一个支持粘性标题的分区列表。我们无法通过 react-virtualized Lists/Grids 实现这一点，所以我创建了支持粘性标题的https://github.com/marchaos/react-virtualized-sticky-tree。

它只呈现显示可见列表以及任何父节点所需的内容，以便它们可以保持“粘性”。然后从 DOM 中删除任何随后脱离的父级。请注意，它也支持嵌套的粘性级别。

参见示例here。

（免责声明：我是作者）