如何呈现一个列表/网格行，如果它是粘性的

How to render a List / Grid row as if it were sticky?

本文关键字：如果网格何呈现列表一个更新时间：2023-09-26

我有一个组件利用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支持他们?

谢谢!

我们有类似的要求，你-我们需要一个列表，是支持粘头部分。我们无法用react虚拟化的列表/网格实现这一点，所以我创建了https://github.com/marchaos/react-virtualized-sticky-tree，它支持粘贴头。

它只呈现显示可见列表加上任何父节点所需的内容，以便它们可以保持"粘性"。任何未卡住的父节点都将从DOM中移除。请注意，它也支持嵌套的粘性级别。

请看这里的例子

(免责声明:我是作者)