使用React+ant Table 实现 表格无限循环滚动播放

数据大屏表格数据，当表格内容超出（出现滚动条）时，无限循环滚动播放，鼠标移入暂停滚动，鼠标移除继续滚动；数据量小没有超出时不需要滚动。
*使用时应注意，滚动区域高度=父元素高度 - 表头高度
1、组件内容

import React, { useState, useEffect, useRef } from "react";
import { Table } from "antd";
import { ColumnsType, TableRef } from "antd/lib/table";
import styles from "./styles.less";
import Nodate from "../Other/nodata";interface InfiniteScrollTableProps<T> {/** 表格数据源 */dataSource: T[];/** 表格列定义 */columns: ColumnsType<T>;/*** 唯一字段*/rowKeyField: string;/*** 滚动速率。* @default 0.5* @description 建议在 0.5-3 之间调整* */speed?: number;
}/*** @description 无限循环滚动table*/
const InfiniteScrollTable = <T = any,>(props: InfiniteScrollTableProps<T>) => {const { dataSource, columns, speed = 0.5, rowKeyField = "key" } = props;const [doubleData, setDoubleData] = useState<any[]>([]);const tableRef = useRef<TableRef>(null);const animationRef = useRef<number | null>(null);const isHovered = useRef(false);// 滚动高度const scrollHeight = useRef(0);// 滚动动画const startScrolling = (begin: boolean) => {if (isHovered.current || !tableRef.current || !tableHasScroll()) return;const table = tableRef.current.nativeElement;const wrapper = table.querySelector(".ant-table-body");if (!wrapper) {return;}// 重置滚动位置if (begin) {wrapper.scrollTop = 0;}const scroll = () => {if (isHovered.current) return;// 滚动到底部时重置位置if (wrapper.scrollTop >= wrapper.scrollHeight / 2) {wrapper.scrollTop = 0;} else {wrapper.scrollTop += speed;}animationRef.current = requestAnimationFrame(scroll);};animationRef.current = requestAnimationFrame(scroll);};// 表格内容是否出现滚动const tableHasScroll = () => {const table = tableRef.current?.nativeElement;const wrapper = table?.querySelector(".ant-table-body");if (!wrapper) {return false;}const hasScroll = wrapper.scrollHeight > wrapper.clientHeight;return hasScroll;};// 停止滚动const stopScrolling = () => {if (animationRef.current) {cancelAnimationFrame(animationRef.current);animationRef.current = null;}};// 处理鼠标事件const handleMouseEnter = () => {isHovered.current = true;stopScrolling();};const handleMouseLeave = () => {isHovered.current = false;startScrolling(false);};useEffect(() => {// 先设置为初始数据setDoubleData([...dataSource]);}, [dataSource]);// 开始滚动useEffect(() => {// 创建两倍数据用于实现无缝滚动if (tableHasScroll() && doubleData.length === dataSource.length) {setDoubleData([...dataSource, ...dataSource]);}startScrolling(true);return () => stopScrolling();}, [tableRef.current, doubleData]);return (<divref={(el) => (scrollHeight.current = el?.clientHeight || 0)}className={styles["infinite-scroll-table"]}onMouseEnter={handleMouseEnter}onMouseLeave={handleMouseLeave}><Tableref={tableRef}columns={columns}dataSource={doubleData}pagination={false}scroll={{ y: scrollHeight.current - 57 }}rowClassName={(record, index) =>index % 2 === 0 ? styles["even-row"] : styles["odd-row"]}rowKey={(record: any, index) => (record?.[rowKeyField] ?? "") + index}/></div>);
};export default InfiniteScrollTable;

2、样式

.infinite-scroll-table {position: relative;height: 100%;transition: all 0.3s ease;border: 1px solid rgba(187,187,187,1);.highlight {color: #40a9ff;font-weight: 600;}.even-row {background: rgba(255,255,255);height: 60px;}.odd-row {background: rgba(250,250,250);height: 60px;}:global {.ant-table-header{border-radius: 0;}.ant-table-thead > tr > th {background: rgba(242,242,242) !important;color: #333 !important;font-size: 14px;font-weight: 600;text-align: center;border-start-start-radius: 0 !important;border-start-end-radius: 0 !important;}.ant-table-body {scrollbar-width: none;-ms-overflow-style: none;}.ant-table-cell{font-weight: normal;font-size: 14px;}.ant-table-body::-webkit-scrollbar {display: none;}.ant-table-row:hover > td {background: rgba(64, 144, 255, 0.2) !important;}.ant-table-placeholder .ant-table-cell{border: none;}}}