在数据可视化大屏中会有滚动表格的需求，不使用插件自己封装重复使用！！！！
好久不见！话不多说，直接上代码！！！！！！！！！！
一、利用scrollTop、定时器实现滚动效果
scrollTop为元素滚动条滚动距离
roll(t) { var box1 = document.getElementById("box1"); var box2 = document.getElementById("box2"); var table = document.getElementById("table"); table.scrollTop = 0; // 开始无滚动时设为0 滚动距离 // 当内容小于父元素不实现滚动 if (box1.scrollHeight >= table.scrollHeight) { box2.innerHTML = box1.innerHTML; } this.timer = setInterval(this.rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快 // 鼠标移入div时暂停滚动 table.onmouseover = () => { clearInterval(this.timer); } // 鼠标移出div后继续滚动 table.onmouseout = () => { this.timer = setInterval(this.rollStart, t); } }, rollStart() { // 上面声明的DOM对象为局部对象需要再次声明 var box1 = document.getElementById("box1"); var table = document.getElementById("table"); // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0,scrollTop滚动条滚动的距离 if (table.scrollTop >= box1.scrollHeight) { table.scrollTop = 0; } else { table.scrollTop += 1; } }
二、效果展示
三、完整代码实现
<template> <div> <div class="cont"> <div class="title-cont"> <div class="title" v-for="item in titleList"> {{ item.title }} </div> </div> <div class="table" id="table"> <div id="box1"> <div class="content" v-for="item in tableData"> <div class="item">{{ item.name }}</div> <div class="item">{{ item.phone }}</div> <div class="item">{{ item.age }}</div> </div> </div> <div id="box2"></div> </div> </div> </div></template><script>export default { data() { return { titleList: [ { title: '姓名' }, { title: '电话' }, { title: '年龄' } ], tableData: [ { name: '张三', phone: '1515151', age: '23' }, { name: '李四', phone: '1515151', age: '23' }, { name: '王五', phone: '1515151', age: '23' }, { name: '赵六', phone: '1515151', age: '23' }, { name: '田七', phone: '1515151', age: '23' }, { name: '田八', phone: '1515151', age: '23' }, { name: '张三丰', phone: '1515151', age: '23' }, { name: '张无忌', phone: '1515151', age: '23' } ], timer: null, } }, mounted() { this.$nextTick(() => { this.roll(20); }) }, methods: { roll(t) { var box1 = document.getElementById("box1"); var box2 = document.getElementById("box2"); var table = document.getElementById("table"); table.scrollTop = 0; // 开始无滚动时设为0 滚动距离 if (box1.scrollHeight >= table.scrollHeight) { box2.innerHTML = box1.innerHTML; } this.timer = setInterval(this.rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快 // 鼠标移入div时暂停滚动 table.onmouseover = () => { clearInterval(this.timer); } // 鼠标移出div后继续滚动 table.onmouseout = () => { this.timer = setInterval(this.rollStart, t); } }, rollStart() { // 上面声明的DOM对象为局部对象需要再次声明 var box1 = document.getElementById("box1"); var table = document.getElementById("table"); // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0,scrollTop滚动条滚动的距离 if (table.scrollTop >= box1.scrollHeight) { table.scrollTop = 0; } else { table.scrollTop += 1; } } }}</script><style lang="scss" scoped>.cont { width: 50vw; height: 50vh; margin: 0 auto; .table { margin: 0 auto; width: 300px; height: 200px; border: 1px solid #ddd; overflow: hidden; .content { width: 100%; height: 40px; display: flex; align-items: center; justify-content: center; .item { width: 100px; height: 40px; text-align: center; line-height: 40px; } } } .title-cont { display: flex; align-items: center; justify-content: center; .title { width: 100px; height: 40px; text-align: center; line-height: 40px; border: 1px solid #333; &:not(&:first-of-type) { border-left: none; } } }}</style>