Wie rende ich eine List/Grid-Zeile so, als wäre sie sticky?

Question

Ich habe eine Komponente, die react-virtualized 's List für seine virtualisierte Scrolling, wo jede Zeile ist entweder eine Kategorie-Header oder tatsächlichen Inhalt dieser Kategorie. So etwas wie:

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

(Wo Fruits und Grains sind Kategorie Header)

Wenn der Benutzer scrollt, wenn sie an einer Kategorie Kopf blättern, möchte ich aus dieser Reihe, die Daten zu übernehmen zu können und Rendern Sie es in einem "sticky" (in Anführungszeichen, weil position: sticky ist nicht wirklich eine praktikable Option noch) Container, an den oberen Rand des Scroll-Containers stecken, bis sie an der nächsten Kategorie-Header scrollen, und so weiter. (Im Prinzip funktioniert das Scrollen durch Artists auch in der iOS Music App.)

Die heikle Sache ist, ich möchte, dass dieser klebrige Header immer noch im Scroll-Container ist, anstatt ihn zu überlagern oder darüber zu sitzen es muss die Breite seines übergeordneten Containers ausfüllen, was das Rendern eines sticky-Containers außerhalb der List-Komponente ausschließt und es nur oben mit position: absolute überlagert.

Soweit ich das beurteilen kann, scheint es so, als ob im Moment mit react-virtualized nichts wirklich möglich ist - da alle Zeilen absolut positioniert sind, gibt es keine Möglichkeit, eine "klebrige" Zeile in der Scroll zu erstellen Container. Die absolute Positionierung des Sticky-Headers funktioniert nur, wenn alle anderen Zeilen im normalen Dokumentfluss statisch positioniert sind.

Ist es möglich, so etwas wie sticky headers mit react-virtualized gerade jetzt zu erreichen? Wenn nicht, was würde es brauchen, um react-virtualized zu unterstützen?

Danke!

Answer 1

Wir hatten ähnliche Anforderungen an Sie - wir brauchen eine Liste, die mit Unterstützung für sticky headers unterteilt wurde. Dies konnten wir nicht mit reaktionsvirtualisierten Listen/Grids erreichen, also habe ich https://github.com/marchaos/react-virtualized-sticky-tree erstellt, das sticky header unterstützt.

Es rendert nur, was erforderlich ist, um eine sichtbare Liste plus alle übergeordneten Knoten anzuzeigen, damit sie "sticky" bleiben können. Jeder Elternteil, der sich dann löst, wird aus dem DOM entfernt. Beachten Sie, dass es auch verschachtelte Sticky-Level unterstützt.

Siehe Beispiel here.

(Haftungsausschluss: Ich bin der Autor)