快速做网站的软件微信公众号 视频网站开发

概要

在前端开发大屏的时候，我们会用到表格数据展示，有时候为了使用户体验更加好，会增加表格自动滚动。下边我将以示例代码，用element UI的el-table来讲一下。

技术实现

1 .增加dom监听，鼠标放上去的时候不滚动，鼠标离开的时候滚动

  	  let status = true;scrollDom.addEventListener('mouseover', () => {status = false;});scrollDom.addEventListener('mouseout', () => {status = true;});

2 通过判断dom的scrollHeight和scrollTop的关系，来实现滚动

	this.timer = setInterval(() => {if (status) {debuggerscrollDom.scrollTop += 1;if (scrollDom.scrollHeight - (scrollDom.clientHeight + scrollDom.scrollTop) < 1) {scrollDom.scrollTop = 0;}}}, 100);

3.当不需要使用，或者表格需要重新渲染的时候，我们需要清掉定时器

  clearInterval(this.timer);

完整代码

 startAutoScroll() {const scrollDom = this.$refs.tableList.bodyWrapper;let status = true;scrollDom.addEventListener('mouseover', () => {status = false;});scrollDom.addEventListener('mouseout', () => {status = true;});this.timer = setInterval(() => {if (status) {debuggerscrollDom.scrollTop += 1;if (scrollDom.scrollHeight - (scrollDom.clientHeight + scrollDom.scrollTop) < 1) {scrollDom.scrollTop = 0;}}}, 100);},