显示MUI DatatGrid Component的滚动阴影

Question

我有一个带有粘稠标题的MUI桌子。 我希望每当桌子在顶部时，它都会在标题下方的顶部显示阴影。 当滚动完全位于底部时，它在底部显示阴影。 当它处于中间位置时，它显示两个阴影。 我该怎么办？

Answer 1

经过很多尝试，这就是我设法做到的

import * as React from "react";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";


export default function DenseTable() {
  const headerRef = React.useRef<HTMLTableSectionElement>(null);
  const headerHeight = headerRef.current?.offsetHeight ?? 0;
  const tableContainerRef = React.useRef<HTMLDivElement>(null);
  const [isAtTop, setIsAtTop] = React.useState(true);
  const [isAtBottom, setIsAtBottom] = React.useState(false);

  React.useEffect(() => {
    const handleScroll = () => {
      if (tableContainerRef.current) {
        const { scrollTop, scrollHeight, clientHeight } =
          tableContainerRef.current;
        setIsAtTop(scrollTop === 0);

        // + 1 for some tolerance
        setIsAtBottom(scrollTop + clientHeight >= scrollHeight - 1);
      }
    };

    const container = tableContainerRef.current;
    container?.addEventListener("scroll", handleScroll);

    return () => {
      container?.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <TableContainer
      component={Paper}
      sx={{ height: "300px" }}
      ref={tableContainerRef}
    >
      <div
        style={{
          zIndex: 100,
          content: '""',
          position: "sticky",
          // no idea where the -40px come from
          marginTop: "calc(-100% - 40px)",
          top: 0,
          left: 0,
          right: 0,
          height: "100%",
          pointerEvents: "none",
        }}
      >
        {!isAtTop && (
          <div
            style={{
              "--header-height": `${headerHeight}px`,
              content: '""',
              position: "absolute",
              background:
                "linear-gradient(180deg, rgba(20, 20, 20, 0.6) 0%, rgba(20, 20, 20, 0.6) 10%, rgba(30, 30, 30, 0) 100%)",
              top: "calc(var(--header-height) - 1px)",
              left: 0,
              width: "100%",
              height: "10px",
            }}
            className="shadow-top"
          />
        )}
        {!isAtBottom && (
          <div
            style={{
              content: '""',
              position: "absolute",
              background:
                "linear-gradient(0deg, rgba(20, 20, 20, 0.6) 0%, rgba(20, 20, 20, 0.6) 10%, rgba(30, 30, 30, 0) 100%)",
              bottom: 0,
              left: 0,
              width: "100%",
              height: "10px",
            }}
            className="shadow-bottom"
          />
        )}
      </div>
      <Table
        stickyHeader
        sx={{ minWidth: 650 }}
        size="small"
        aria-label="a dense table"
      >
        <TableHead ref={headerRef}>
          ...
        </TableHead>
        <TableBody>
          ...
        </TableBody>
      </Table>
    </TableContainer>
  );
}

我仍然不知道如何计算

- 40px

。很高兴收到有关它的评论。

herehhere

codesandboxfor.