目录
- 实现原理
- 如何判断是否滚到到底部？
- 停止和开始滚动的控制
- 优化滚动体验
实现原理
某个函数实现向下滚动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;
)
)
