3

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

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

(类别标题的位置Fruits和位置)Grains

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

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

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

现在有可能实现像粘性标题这样的东西react-virtualized吗?如果没有,需要什么来react-virtualized支持他们?

谢谢!

4

1 回答 1

1

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

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

请参见此处的示例。

(免责声明:我是作者)

于 2017-07-10T08:15:21.677 回答