表格滚动效果,此处使用的elementUI的table组件(自己写table标签同理)
表格内容自滚动效果
// 拿到表格挂载后的真实DOM const table = this.$refs.table // 拿到表格中承载数据的div元素 const divData = table.bodyWrapper // 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素) this.timer2 = setInterval(() => { // 元素自增距离顶部1像素 divData.scrollTop += 2 // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度) if (divData.clientHeight + divData.scrollTop >= divData.scrollHeight) { // 重置table距离顶部距离 divData.scrollTop = 0 } }, 100)
鼠标移入停止滚动
divData.onmouseover = () => { clearInterval(this.timer2) this.timer2 = null }
鼠标移出继续滚动
divData.onmouseout = () => { this.timer2 = setInterval(() => { // 元素自增距离顶部1像素 divData.scrollTop += 2 // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度) if (divData.clientHeight + divData.scrollTop >= divData.scrollHeight) { // 重置table距离顶部距离 divData.scrollTop = 0 } }, 100) }
需要在生命周期清除定时器,避免页面切换重复创建此定时器
beforeDestroy() { clearInterval(this.timer2) this.timer2 = null },