/**
* @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>
)