实现原理

某个函数实现向下滚动1个像素效果，使用setInterval每隔1秒都调用这个函数，就实现了滚动的效果。

init = () => {const that = this;this.timeInterval = setInterval(() => {const dom = that.divRef.current.getElementsByClassName("ant-table-body')[0]const { crowedScrollTop} = that.statethat.setstate({crowedScrollTop: crowedScrollTop+ 1}, () => {const {crowedScrollTop: newTop } = that.state;dom.scrollTop = newTop;});if (Math.ceil(dom.scrollTop) >= dom.scrollHeight - dom.clientHeight {dom.scrollTop = 0;if(dom.scrollHeight > dom.clientHeight {// 刷新表格}that.setstate({ crowedScrollTop:0 })}}, 100)
}

渲染逻辑

this.divRef = React.createRef();
<div ref={this.divRef}><Table />
</div>

如何判断是否滚到到底部？

if (Math.ceil(dom.scrollTop) >= dom.scrollHeight - dom.clientHeight)

dom.scrollTop: 当前滚动元素的顶部已经滚动过去的像素值。如果这个值为0，说明元素还没有滚动；如果这个值等于或接近dom.scrollHeight - dom.clientHeight，说明元素已经滚动到底部。

dom.scrollHeight: 滚动元素的总高度，包括因溢出而不可见的内容。

dom.clientHeight: 滚动元素的可视区域的高度。

停止和开始滚动的控制

提供一种机制（如按钮或鼠标悬停事件）来控制滚动的开始和停止。
当用户与表格交互（例如点击或滚动）时，可能需要暂停自动滚动。

addScrollEvent = () => {const that = this;const dom = that.divRef.current.getElementsByClassName("ant-table-body')[0]dom.onmouseover = () => {that.clear();}dom.onmouseout = () => {that.init();}dom.onscroll = () => {if(dom) {that.setState({// 保存自行滚动的高度crowedScrollTop: dom.scrollTop})}}
}clear = () => {this.timeInTERVAL && clearInterval(this.timeInterval)
}

优化滚动体验

考虑使用requestAnimationFrame来替代setInterval，以实现更平滑的滚动效果。
避免在滚动过程中进行大量计算或DOM操作，以免影响性能。

import React, { useRef, useEffect, useState } from 'react';  const MyComponent = () => {  const divRef = useRef(null);  const [crowedScrollTop, setCrowedScrollTop] = useState(0);  useEffect(() => {  const dom = divRef.current.getElementsByClassName('ant-table-body')[0];  if (dom) {  let frameId; // 将 frameId 声明在 useEffect 的作用域内  function autoScroll() {  if (crowedScrollTop < dom.scrollHeight) {  setCrowedScrollTop(crowedScrollTop => crowedScrollTop + 1);  dom.scrollTop = crowedScrollTop;  frameId = requestAnimationFrame(autoScroll); // 更新 frameId  } else {  dom.scrollTop = 0;  setCrowedScrollTop(0);  // 刷新表格  }  }  frameId = requestAnimationFrame(autoScroll); // 初始化 frameId  // 清理函数  return () => {  cancelAnimationFrame(frameId); // 使用在 useEffect 作用域内声明的 frameId  };  }  }, []); // 注意，这个effect只在组件挂载时运行一次  // 渲染逻辑  return (  <div ref={divRef}>  {/* ...表格内容... */}  </div>  );  
};  export default MyComponent;