javascript - 材料表的标题闪烁和冻结问题（使用反应窗口+反应窗口无限加载器实现）

Question

我已经使用 react-window （基于#60）和材质 UI 实现了一个无限滚动表。

这张桌子似乎正在实现主要目标，但它几乎没有问题 -

1. stickyHeader尽管有适当的样式（道具），但标题并没有粘在顶部。
2. 快速向上滚动时，标题闪烁/闪烁。[重现步骤 - 向下滚动 50%，然后快速向上滚动并观察标题移动]。

这是代码框示例 - https://codesandbox.io/s/react-window-with-table-elements-forked-huti6?file=/src/index.tsx:514-542

Answer 1

首先关于react-window：中的 Scollbarsreact-window是用于而outercontainer不是用于InnerContainer。现在不要尝试更换外部容器本身，除非您想自己处理所有事情。所有的滚动事件都附加了一些东西outercontainer。

可以把它想象成外部容器决定/采用大小，并且较大的内部容器在其中滚动。

现在看看您的情况，我假设您正在尝试使表格的行为与任何其他网格一样，其中标题固定并且内容在溢出时滚动。您的表头在元素层次结构中远低于内部容器，因此您无法编写任何简单的 css（或 js 逻辑）来在当前层次结构中实现。

这就是为什么即使您为 设置stickyheader了MaterialUI table，它也不会粘住。导致您的整个表（MaterialUI table）在 的外部容器内滚动react-window。

我建议您将表头移到 之外，react-window并且只将行放在react-widow. 这就是它应该表现的方式（即反应窗口将其中的所有内容视为可滚动内容）。请参阅以下演示文稿之一：

关于重新设计你的一点提示table（猜测可以通过额外的 css 来改进对齐）

Answer 2

作为您的实现的替代方案，Material UI 文档有一个虚拟化表的工作示例，可以使用react-virtualized. 也就是说，标题是粘性的，并且在滚动过程中没有标题的闪烁/闪烁。

下面是一个包含工作示例的代码框，以反映您所需的布局。

Answer 3

使用默认值，TableContainer overflow-x粘性标题应该可以工作

import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles({
  tableContainer: {
    overflowX: "initial"
  }
})

function Inner({ children, ...rest }, ref) {
  const { header, footer, top } = useContext(VirtualTableContext)
  const classes = useStyles();
  return (
    <TableContainer classes={{root: classes.tableContainer}} {...rest} ref={ref}>
    ...