【JS】react antd 项目如何让Table组件表格滚动播放

实现原理

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

init = () => {
	const that = this;
	this.timeInterval = setInterval(() => {
		const dom = that.divRef.current.getElementsByClassName("ant-table-body')[0]
		const { crowedScrollTop} = that.state
		that.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)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

渲染逻辑

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

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

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)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

优化滚动体验

考虑使用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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42