react-virtualized 中的粘性标题

Posted 2023-02-21

【中文标题】react-virtualized 中的粘性标题

【英文标题】：Sticky headers in react-virtualized

【发布时间】：2017-03-23 11:30:46

【问题描述】：

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

【参考方案1】：

如果我正确理解了您的问题，您希望在电子表格中使用粘性标题。您可以使用 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>
  )

【讨论】：

我试过这个，但它假设在计算标题单元格的宽度以将它们与正文单元格对齐时总是有滚动条。无论滚动条是否存在，我都需要一些动态的东西来保持标题和正文单元格对齐。

【参考方案2】：

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

参见示例here。

【参考方案3】：

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

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

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