设置溢出到卷轴

Question

用于由MUI元素组成的卡片的虚拟化。我想将我的应用高度保持在100VH，因此没有整个屏幕向下滚动。但是包含提要的组件可以滚动。我在上面使用

overflowY: 'scroll'

，因此我可以在此元素内滚动而不会向下滚动屏幕。

问题是，当我将

overflowY: 'scroll'

申请到内部的div时

LogCards

包裹地图迭代时，滚动变得非常紧张，它的闪烁非常快，好像它在正确计算滚动位置时遇到了麻烦，然后所有卡片都消失了。我该如何解决？一旦我删除

overflowY: 'scroll'

并允许整个屏幕滚动，问题就消失了。

简短的视频。

在这里是持有提要的组件：

const LogCards = ({ pageLimit }: LogCardsProps) => {
  const {
    data: logs,
    fetchNextPage,
    isFetchingNextPage,
    isLoading,
  } = useInfiniteLogsQuery(pageLimit);
  const { ref, inView } = useInView();

  const allLogs = useMemo(() => logs?.pages.flatMap((log) => log.results), [logs]) || [];
  const parentRef = useRef<HTMLDivElement>(null);

  const rowVirtualizer = useVirtualizer({
    count: allLogs.length,
    getScrollElement: useCallback(() => parentRef.current, []),
    estimateSize: useCallback(() => 300, []),
    overscan: 2,
    gap: 8,
  });

  useEffect(() => {
    if (inView) fetchNextPage();
  }, [fetchNextPage, inView]);

  return !isLoading ? (
    <Box ref={parentRef} sx={{ overflowY: 'scroll' }}>
      <div style={{ height: `${rowVirtualizer.getTotalSize()}px` }}>
        {allLogs &&
          rowVirtualizer.getVirtualItems().map((log, index) => {
            const LogCardData = allLogs[log.index];
            console.log(LogCardData);

            if (!LogCardData) return <span key={`no card index ${index}`}>No cards</span>;
            return (
              <LogCard
                key={LogCardData.id}
                data-index={log.index}
                ref={rowVirtualizer.measureElement}
                log={LogCardData}
              />
            );
          })}
      </div>
      <Box sx={{ height: '20px' }} ref={ref}>
        {isFetchingNextPage && <LinearProgress sx={{ m: '2px' }} />}
      </Box>
    </Box>
  ) : (
    <LinearLoader />
  );
};

这里是容纳记录卡的组件：

const LogsList = () => {
  const [pageLimit, setPageLimit] = useState(25);

  return (
    <Paper
      sx={{
        display: 'flex',
        flexDirection: 'column',
        height: '100vh',
        px: 1,
        borderRadius: { xs: '4px', md: 0 },
      }}
    >
      <Typography variant="h5" textAlign="center" sx={{ py: 2 }}>
        List of unsolved logs
      </Typography>
      <LogsLimitButtons pageLimit={pageLimit} setPageLimit={setPageLimit} />
      <LogCards pageLimit={pageLimit} />
    </Paper>
  );
};

在这里是应用程序的一般布局：

const LaunchDesktop = () => {
  return (
    <Grid2 container spacing={1}>
      <Grid2
        size={{ xs: 12, md: 8 }}
        sx={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <SosForm />
      </Grid2>
      <Grid2 size={{ xs: 12, md: 4 }}>
        <LogsList />
      </Grid2>
    </Grid2>
  );
};

在

Tanstack网站上引用了此示例，并用具有

transform

风格的DIV包裹了我的LogCard迭代。我猜所有元素都绝对放置，需要解释所有元素。

Answer 1