reactjs - react-virtualized 中的粘性标题

Question

我正在使用Listreact-virtualized 中的组件来呈现大量项目。在我的实现中，项目是分段的，我希望部分标题具有粘性，以便在用户向下滚动时当前部分保持可见。本质上，我需要 react-virtualized 不要在滚动位置更改时破坏节标题（但继续破坏其他项目）。现在有没有办法做到这一点？只要他们不太疯狂，我对黑客持开放态度。

Answer 1

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

请参见此处的示例。

Answer 2

如果我正确理解了您的问题，您希望在电子表格中使用粘性标题。您可以使用该ScrollSync组件执行此操作，请查看demo/docs。

这是文档中显示的示例：

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 3

如果有人使用 react-virtualized 的 Table 组件而不是 List 组件来到这里，您可以使用以下 CSS 使标题保持粘性：

.ReactVirtualized__Table__headerRow {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
}

确保 Table 的所有父元素都没有overflow样式，否则这将不起作用。