表格頁

     import AutoScroll from "./auto-scroll";



        <AutoScroll
          dataSource={data}
          columns={columns}
          pagination={false}
          scroll={{ y: "calc(1280px - 130px - 150px - 500px)" }}
        />

表格滾動組件頁

/* eslint-disable react-hooks/rules-of-hooks */
import React, { useEffect, useState, useRef } from "react";
import { Table } from "antd";
import { MonitoringData } from "../../models/big-screen";

export default function index(props: any) {
//   /**表格數據 */
//   dataSource: MonitoringData[];
//   /** 表格每次滾動間隔時間，單位ms */
//   rollTime: number;
//   /** 數據超過指定條數開始滾動 */
//   rollNum: number;
//   /** 表格每次滾動高度, 單位px */
//   rollTop: number;
//   /** 是否滾動 */
//   flag: boolean;
  const {
    dataSource,
    rollTime = 10,
    rollNum = 5,
    rollTop = 1.5,
    flag = true,
  } = props;
  const [timer, setTimer] = useState<number>(100); // 定時器
// 鼠標初始化，即開始滾動
  useEffect(() => {
    InitialScroll(dataSource);
    // 檢測數組內變量 如果為空 則監控全局
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dataSource]);
/**
 鼠標初始化，不滾動，鼠標移入移出后，才能觸發滾動
 useEffect(() => {
    InitialScroll(dataSource);
    // 檢測數組內變量 如果為空 則監控全局
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
*/
  // 開啟定時器
  const InitialScroll = (data: MonitoringData[]) => {
    const v = document.getElementsByClassName("ant-table-body")[0];
    if (data.length > Number(rollNum) && flag) {
      // 只有當大于10條數據的時候 才會看起滾動
      const time = setInterval(() => {
        v.scrollTop += Number(rollTop);
        if (
          Math.ceil(v.scrollTop) >= parseFloat((v.scrollHeight - v.clientHeight).toString())
        ) {
          v.scrollTop = 0;
        //   setTimeout(() => { v.scrollTop = 0 }, 1000)
        }
      }, Number(rollTime));
      setTimer(time); // 定時器保存變量 利于停止
    }
  };
  return (
    <div
      onMouseOver={() => {
        clearInterval(timer);
      }}
      onMouseOut={() => {
        InitialScroll(dataSource);
      }}
    >
      <Table
        pagination={false}
        scroll={{
          y: 500,
          x: "100%",
          scrollToFirstRowOnChange: true,
        }}
        {...props}
      />
    </div>
  );
}