Sticky-Header in reaktiv-virtualisiert

Question

Ich verwende eine List Komponente in react-virtualisiert, um eine große Anzahl von Elementen zu rendern. In meiner Implementierung sind die Elemente unterteilt, und ich möchte, dass die Abschnittsüberschriften "sticky" sind, damit der aktuelle Abschnitt sichtbar bleibt, wenn Benutzer nach unten scrollen. Im Wesentlichen muss ich reaktionsvirtualisiert werden, um die Abschnittsüberschriften nicht zu zerstören, wenn sich die Bildlaufposition ändert (aber weiterhin andere Elemente zerstören). Gibt es einen Weg, dies jetzt zu tun? Ich bin offen für Hacks, solange sie nicht zu verrückt sind.

Answer 1

Wenn ich Ihre Frage richtig verstanden habe, möchten Sie Sticky Header a la eine Tabelle haben. Sie können das mit der Komponente ScrollSync tun, werfen Sie einen Blick auf die demo/docs.

Hier ist die exmaple in docs angezeigt:

import { Grid, List, ScrollSync } from 'react-virtualized' 
import 'react-virtualized/styles.css'; // only needs to be imported once 

function render (props) { 
    return (
    <ScrollSync> 
     {({ clientHeight, clientWidth, onScroll, scrollHeight, scrollLeft, scrollTop, scrollWidth }) => (
     <div className='Table'> 
      <div className='LeftColumn'> 
      <List 
       scrollTop={scrollTop} 
       {...props} 
      /> 
      </div> 
      <div className='RightColumn'> 
      <Grid 
       onScroll={onScroll} 
       {...props} 
      /> 
      </div> 
     </div> 
    )} 
    </ScrollSync> 
) 
} 

Answer 2

Wir werden Ihnen ähnliche Anforderungen hatten - wir brauchen eine Liste, die mit Unterstützung für sticky Header geschnitten 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.

Siehe Beispiel here.