Mantine ScrollArea 和 react-virtual 虚拟列表使用方式

import { ScrollArea, Box, Flex, Text } from "@mantine/core";
import { useVirtualizer } from "@tanstack/react-virtual";
import { useRef } from "react";

function App() {
  const ref = useRef<HTMLDivElement>(null);
  const virtualizer = useVirtualizer({
    count: 20000,
    getScrollElement: () => ref.current,
    estimateSize: () => 26,
  });

  return (
    <Flex w="100vw" h="100vh" direction="column">
      <ScrollArea h={400} w={300} viewportRef={ref} styles={{ scrollbar: { backgroundColor: "transparent" } }}>
        <Box h={virtualizer.getTotalSize()} w="100%" pos="relative">
          {virtualizer.getVirtualItems().map((item) => (
            <Flex
              key={item.key}
              pos="absolute"
              w="100%"
              h={item.size}
              style={{ transform: `translateY(${item.start}px)` }}
            >
              <Text>item: {item.index}</Text>
            </Flex>
          ))}
        </Box>
      </ScrollArea>
    </Flex>
  );
}