antD表格实现自动滚动(vue2)

原理：

1.获取整个滚动条容器的高度(也就是表格内容区域的高度)

2.获取滚动条自身的高度，用整个滚动条容器的高度减去滚动条自身的高度就是滚动条能够滚动的距离；

3.获取滚动条自身距离滚动条容器顶部的高度，使其自增；滚动条就能开始滚动了

4.当滚动条距离容器顶部的距离大于等于滚动条能够滚动的距离，说明此时滚动条已经滚动到底部了；

实现思路：

1.获取到整个滚动条容器的高度

2.获取滚动条距离顶部的距离

3.使其自增，滚动条滚动

4.到达底部后使滚动条重新返回顶部

5.给整个流程添加定时器，使其反复滚动

6.优化：

滚动到底部时停留2s，返回顶部开始滚动时停留2s；

滚动条能够滚动的距离过短时禁止滚动，每隔1min刷新当前数据

具体实现：

//1.获取到整个滚动条容器的高度
//初始化时scrollTop默认为0，所以只需用scrollHeight  -  clientHeight就能算出目前滚动条能够滚动的距离
 const scrollHeight = document.querySelectorAll('.scrollItemBox .ant-table-body')[0]?.scrollHeight;
 const clientHeight = document.querySelectorAll('.scrollItemBox .ant-table-body')[0]?.clientHeight;
 const scroll = scrollHeight - clientHeight;

//2.获取滚动条距离顶部的距离
 this.scrollTop = document.querySelectorAll('.scrollItemBox .ant-table-body')[0]?.scrollTop;

//3.使其自增，滚动条滚动
 let temp = this.scrollTop + 10;
  document.querySelectorAll('.scrollItemBox .ant-table-body')[0].scrollTop = temp;

//4.到达底部后使滚动条重新返回顶部
 if(scroll <= temp){
                let delayLoadingTimer = setTimeout(()=>{
                clearInterval(this.scrollTimer);
                this.scrollTimer = null;
                document.querySelectorAll('.scrollItemBox .ant-table-body')[0].scrollTop = 0;
                //重新请求数据
                this.getQueueData();
                clearTimeout(delayLoadingTimer);
                },1000 * 2);
                         }

//5.给整个流程添加定时器，使其反复滚动
​
scrollFun(){
   if(this.scrollTimer){
                 clearInterval(this.scrollTimer);
                 this.scrollTimer = null;
             }
             
                this.scrollTimer = setInterval(()=>{
                    const scrollHeight = document.querySelectorAll('.scrollItemBox .ant-table-body')[0]?.scrollHeight;
                    const clientHeight = document.querySelectorAll('.scrollItemBox .ant-table-body')[0]?.clientHeight;
                    const scroll = scrollHeight - clientHeight;
                 // 滚动距离太短时无需滚动，每隔1min重新请求数据
                 if(scroll <= 40){
                     clearInterval(this.scrollTimer);
                     this.scrollTimer = null;
                   return   this.searchLoadTimer = setInterval(()=>{
                         this.getQueueData();
                     },1000 * 60)
                 }
               //滚动条距离容器顶部的距离
               this.scrollTop = document.querySelectorAll('.scrollItemBox .ant-table-body')[0]?.scrollTop;
                    if(this.scrollDirection === 'down'){
                         // 滚动条累加距离 temp
                        let temp = this.scrollTop + 10;
                         document.querySelectorAll('.scrollItemBox .ant-table-body')[0].scrollTop = temp;
                         // 滚动条滚动到底部
                         if(scroll <= temp){
                              let delayLoadingTimer = setTimeout(()=>{
                              clearInterval(this.scrollTimer);
                              this.scrollTimer = null;
                             //回到顶部
                              document.querySelectorAll('.scrollItemBox .ant-table-body')[0].scrollTop = 0;
                              //重新请求数据
                              this.getQueueData();
                              clearTimeout(delayLoadingTimer);
                            },1000 * 2);
                        }
                    }
             },300)
}

注意事项：

销毁阶段记得清除所有定时器