代码
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;
} ) ( ) ;