css - 使用粘性标题制作整页滚动条控制表（仅限 CSS）

Question

以下沙箱显示的代码非常适合Table放置在Paper带有粘性标题的组件中的 Material UI：https ://codesandbox.io/s/2n40y

我希望滚动条（水平和垂直）分别出现在浏览器页面的边缘，底部和右侧，但仍控制Table自身的滚动。

目前，我只能在从 Paper 中删除表格并直接使其成为页面的子级 - 或div跨越整个页面高度的 main 的子级时才能执行此操作。然而，我需要将Paper组件保留在那里，其他组件将放置在它的上方和下方。

关于如何实现这一目标的任何想法？

更新：在附加的草图中，浏览器边框显示为黑色，而滚动条最好显示为绿色。页面中间有一个容器 div，其中包含红色的表格。表格的标题应该是粘性的，表格不应该出现在容器 div 之外，容器 div 充当了它周围的美学包装。理想情况下，浏览器垂直滚动条会向下滚动整个页面，同时保留页眉（标题+副标题）和表格标题。此外，水平滚动时，表格应在容器 div 内滚动。这就是为什么我标记了理想情况下不应该出现在虚线中的部分。

标签： csshtml-tablematerial-uisticky

Answer 1

我们需要做的所有改变都在demo.js

首先，我们需要使用自定义 MUITableContainer作为containerComponent您的@devexpress/dx-react-grid-material-ui Table. 基本上，这样做的目的是让我们可以删除 的overflow属性，Table以便滚动主要是为了解决 body 的要求

滚动条（水平和垂直）分别出现在浏览器页面的底部和右侧

import TableContainer from "@material-ui/core/TableContainer";
import makeStyles from "@material-ui/core/styles/makeStyles";

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

const MUITableContainer = ({ children, ...rest }) => {
  const classes = useStyles();
  return (
    <TableContainer classes={{ root: classes.tableContainer }} {...rest}>
      {children}
    </TableContainer>
  );
};

其次，在你的MUITableContainer, 去掉 ，height: 400px以便表格的高度会响应内容。同样，浏览器主体底部和右侧滚动条现在将控制文档的滚动位置 - 这包括表格。再看看Table containerComponent道具——我们已经分配了我们之前创建的自定义 TableContainer。

<Paper>
  <Grid rows={rows} columns={columns} rootComponent={GridRoot}>
    <Table
      containerComponent={MUITableContainer}
      tableComponent={StickyTable}
    />
    ...

最后，测试这个要求：

在它之前和之后会有其他对象。

只需在组件之前和之后渲染示例Paper组件