代碼

// 使用方式
const Index = () => {useScroll();return <Table />;
}

import { useEffect, useRef, useState } from 'react';export const useScroll = (() => {let timer;function start() {const [isScroll, setIsScroll] = useState(true);const scrollTopRef = useRef(0);useEffect(() => {const scrollHandler = () => {const el = document.querySelector('.ant-table-body');if ((el?.scrollTop as number) >= 300) return;timer && clearInterval(timer);timer = setInterval(() => {requestAnimationFrame(() => {scrollTopRef.current += 2;el?.scrollTo(0, scrollTopRef.current);if ((el?.scrollTop as number) >= 300) {scrollTopRef.current = 0;}});}, 60);if (!isScroll) {timer && clearInterval(timer);}};scrollHandler();}, [isScroll]);useEffect(() => {const el = document.querySelector('.ant-table-body');const enter = () => {setIsScroll(false);};const leave = () => {setIsScroll(true);};el?.addEventListener('mouseenter', enter);el?.addEventListener('mouseleave', leave);return () => {el?.removeEventListener('mouseenter', enter);el?.removeEventListener('mouseleave', leave);};}, []);}return start;
})();