我有一个使用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
支持他们?
谢谢!