如何让antd的table滚动起来

最近有一个小需求，我们的 antd 表格显示不够，但是我们展示的有些东西能让用户更眼前一亮，产品说，这个表格要滚动起来，我想了想，虽然自己不太厉害，但是这个功能明显可以实现的，毕竟好的产品才是竞争力，只要需求合理，把东西做好也是我们开发义不容辞的事情，自然不会推辞，这么一个小功能一会就搞完了，直接就开始干

毕竟以前自己做移动端的时候自己琢磨了不少动画的效果分解，也稍微有了点心得，再加上这个css的样式也接触不少，直接就有了思路

动画，不就是动起来的画面么，如果没有现成的，那么我们就开一个计时器让我们的表格持续滚动起来就行了

接下来就是一步一步实施完成我们的功能

第一步：设置Table支持滚动

首先让我们的 Table 支持滚动，我们设置一下 scroll 参数，超出就滚动即可

js 复制代码

 <Table
    columns={columns}
    dataSource={list}
    scroll={{ y: 200 }}
    pagination={false} />

第二步：获取 dom 以便于使用计时器滚动

紧接着我们需要拿到滚动的 dom 元素，然后直接让其滚动即可，我直接获取其 ref，发现不能滚动，疑惑的我直接开始打开浏览器调试，发现 Table 里面很多节点，而支持滚动的节点交 ant-table-body (因为 overflow-y)，当然不同版本选择器名称可能不一样

我们直接通过选择器名称 ant-table-body 获取其 dom 节点即可

js 复制代码

const table = document.getElementsByClassName('ant-table-body')[0];

第三步：使用计时器形成滚动动画

然后我们编写一个计时器，不停改变其 scrollTop 属性(距离顶部距离)，我们直接让其累加，以形成向下持续滑动效果，检测滑动到底部时，我们直接回到顶部重新开始即可

js 复制代码

const timerRef = useRef<NodeJS.Timeout | null>(null)

//开始滚动
const autoScrollTable = () => {
    const table = document.getElementsByClassName('ant-table-body')[0];
    if (!table || !list || list.length < 3) return
    timerRef.current && clearInterval(timerRef.current) //如果有清除一下，避免开两个计时器
    timerRef.current = setInterval(() => {
        table.scrollTop++; //在计时器中累加，形成向下滑动效果
        if (Math.ceil(table.scrollTop) >= table.scrollHeight - table.clientHeight) { 
            // 滚动条到底后重新开始
            table.scrollTop = 0;
        }
    }, 30)
}

//结束滚动
const stopScrollTable = () => {
    timerRef.current && clearInterval(timerRef.current)
}

上面只需要我们获取完毕数据时，然后开启滚动即可，退出时结束滚动

可能会有人问，时间怎么定义呢，时间当然是我们眼睛看着不难受即可，一般 60帧 是我们感觉到流畅的视频或者动画，30帧 也还不错，我们的计时器间隔实际上就是 1000 / 帧数(单位：ms)，我们取30~60帧左右都行，看着没问题就行了，这里取了 30ms（大约33帧），实际上自己调节就行（60帧我们需要调整到16），自己根据情况调整，时间越短越流畅，但带来的性能开销也越大，自己平衡就是了

有人可能会问，timer 如果有活动，这个动画就不连贯就不好看了，实际上我们展示这个数据，一般不会操作时才滚动，操作时滚不滚动、停不停顿都没影响

如果想做更流畅动画，那么requestAnimationFrame、cancelAnimationFrame这个使用还是不错的，当然有轮子的话我们不做岂不是更好

第四步：鼠标停放、离开时，停止、继续滚动

我们有时候需要访问我们的 Table 元素，那么连续滚动就没必要了，因此我们可以当鼠标移入区域时，停止动画，离开时开启动画，即可使得体验更好

js 复制代码

<div 
    onMouseEnter={stopScrollTable}
    onMouseLeave={autoScrollTable}>
    <Table
        columns={columns}
        dataSource={list}
        scroll={{ y: 200 }}
        pagination={false} />
</div>