react + antd table列表自动滚动
/** * @file: table列表自动滚动,鼠标划入滚动暂停,鼠标划出滚动继续 */ const [dataSource, setDataSource] = useState([]) const [timer, setTimer] = useState() useEffect(() => { if (dataSource.length) { autoScroll(dataSource) } return () => clearInterval(timer); }, [dataSource]) const autoScroll = (data) => { let v = document.getElementsByClassName('antd-table-body')[0]; if (data.length > 5) { // 5可以根据各自的列表高度替换 let time = setInterval(() => { v.scrollTop++; if (Math.ceil(v.scrollTop) >= parserFloat(v.scrollHeight - v.clientHeight)) { // 滚动条到底后重新开始 v.scrollTop = 0; } }, 50) setTimer(timer); } } return ( <div onMouseEnter={() => { clearInterval(timer) }} onMouseLeave={() => {
clearInterval(timer) autoScroll(dataSource) }} > <Table dataSource={dataSource} scroll={{ y: 320 }} columns={...} /> </div> )
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix