<div className="wrapper" style={{
    position: "relative",
    overflow: "auto"
}}>
    <div className="placeholder-list" style={{ 
        height: `${visibleHeight}px` 
    }}></div>
    <div className="render-list" style={{ 
        postion: "absolute", 
        top: 0, 
        left: 0
    }}>...</div>
</div>

scrollEvent(e){
    const startIdx = Math.floor(e.target.scrollTop / itemHeight);
    const endIdx = startIdx + visibleCount;
    setList(source.slice(startIdx, endIdx));
    // 設(shè)置偏移距離，保持?jǐn)?shù)據(jù)在視圖中
    const offset = startIdx * itemHeight;
    listRef.current.style.top = offset + "px";
}

import { useCallback, useEffect, useRef, useState } from "react";

const visibleHeight = 360;
const itemHeight = 50;
const visibleCount = Math.ceil(visibleHeight / itemHeight) + 2;
const totalCount = 100;

const source = Array.from(Array(totalCount), (item, index) => index);

export default function VirtualList() {
  const [list, setList] = useState(source);
  const listRef = useRef();

  const scrollEvent = useCallback((e) => {
    const startIdx = Math.floor(e.target.scrollTop / itemHeight);
    const endIdx = startIdx + visibleCount;
    setList(source.slice(startIdx, endIdx));
    const offset = startIdx * itemHeight;
    listRef.current.style.top = offset + "px";
  }, []);
  
  useEffect(() => {
    listRef.current = document.querySelector(".list");
  }, []);
  
  return (
    <div
      style={{
        backgroundColor: "#FFF",
        height: visibleHeight + 'px',
        textAlign: "center",
        overflow: "auto",
        position: "relative",
        overscrollBehavior: 'contain'
      }}
      onScroll={scrollEvent}
    >
      <div style={{ height: totalCount * itemHeight + 'px' }}></div>
      <div
        className="list"
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          width: "100%",
          height: visibleHeight + 'px'
        }}
      >
        {list.map((item) => {
          return (
            <div
              key={item}
              style={{ height: itemHeight + 'px', borderBottom: "1px solid #eee" }}
            >
              {item}
            </div>
          );
        })}
      </div>
    </div>
  );
}

useEffect(() => {
    const parentNode = document.querySelector('.ant-table-body');
    const table = document.querySelector('.ant-table-body table');
    // 用ref保持table方便在滾動(dòng)事件中使用table dom
    tableRef.current = table;
    // 創(chuàng)建一個(gè)占位的div，高度等于所有數(shù)據(jù)高度，用來(lái)?yè)伍_(kāi)容器展示滾動(dòng)條
    const placeholderWrapper = document.createElement('div');
    placeholderWrapper.style.height = itemHeight * totalCount + 'px'
    parentNode.appendChild(placeholderWrapper);
    // 子絕父相口訣，為table設(shè)置定位，脫離文檔流，把位置讓給占位盒子
    parentNode.style.position = 'relative';
    table.style.position = 'absolute';
    table.style.top = 0;
    table.style.left = 0;
    // 添加滾動(dòng)事件
    parentNode.addEventListener('scroll', scrollEvent)
    return () => {
      // 清理占位盒子
      parentNode.removeChild(placeholderWrapper);
      parentNode.removeEventListener('scroll', scrollEvent)
    }
  }, [scrollEvent]);

const scrollEvent = useCallback((e) => {
    const startIdx = Math.floor(e.target.scrollTop / itemHeight);
    const endIdx = startIdx + visibleCount;
    // 保存當(dāng)前的范圍索引，用來(lái)slice源數(shù)據(jù)給展示用
    setRange([startIdx, endIdx]);
    const offset = startIdx * itemHeight;
    tableRef.current.style.top = offset + "px";
  }, []);

const [range, setRange] = useState([]);
// 這個(gè)renderList就是需要給Table組件的
const renderList = useMemo(() => {
    const [start, end] = range;
    return dataSource.slice(start, end)
  }, [range])

return <Table dataSource={renderList} />