Как отобразить строку List/Grid, как если бы она была липкой?

Question

У меня есть компонент, использующий react-virtualizedList для его виртуализированной прокрутки, где каждая строка является либо заголовком категории, либо фактическим содержимым, принадлежащим этой категории. Так что-то вроде:

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

(Где Fruits и Grains являются категории заголовков)

Как прокрутке, если они прокрутки мимо заголовка категории, я хочу, чтобы иметь возможность принимать данные из этой строки и сделать его «липким» (в кавычках, потому что position: sticky на самом деле не является жизнеспособным вариантом), контейнер, прикрепленный к верхней части контейнера прокрутки, пока они не прокрутятся мимо заголовка следующей категории и т. д. (В принципе, так же, как прокрутка через «Художники» работает в приложении iOS Music.)

Сложная вещь: я хочу, чтобы этот липкий заголовок все еще находился внутри контейнера прокрутки, а не накладывал его или сидел над ним, и он должен заполнить ширину своего родительского контейнера, что исключает предоставление липкого контейнера вне компонента List и просто накладывает его сверху на position: absolute.

Насколько я могу судить, кажется, что делать что-то подобное на самом деле невозможно с react-virtualized на данный момент - так как все строки расположены абсолютно, нет никакого способа создать «липкую» строку внутри прокрутки контейнер. Абсолютное позиционирование липкого заголовка будет работать, но только если все остальные строки были статически расположены в нормальном потоке документа.

Возможно ли достичь чего-то вроде липких заголовков с react-virtualized? Если нет, что нужно сделать, чтобы сделать react-virtualized?

Спасибо!

Answer 1

У нас были схожие требования к вам - нам нужен список, который был разделен на поддержку липких заголовков. Мы не смогли достичь этого с помощью виртуализованных списков/гридов, поэтому я создал https://github.com/marchaos/react-virtualized-sticky-tree, который поддерживает липкие заголовки.

Он отображает только то, что требуется для отображения видимого списка плюс любые родительские узлы, чтобы они оставались «липкими». Любой родитель, который затем отклеивается, удаляется из DOM. Обратите внимание, что он поддерживает вложенные липкие уровни.

См. Пример here.

(Отказ от ответственности: Я автор)