在数据可视化大屏中会有滚动表格的需求，不使用插件自己封装重复使用！！！！

好久不见！话不多说，直接上代码！！！！！！！！！！

一、利用scrollTop、定时器实现滚动效果

scrollTop为元素滚动条滚动距离

<code>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;

}

}

 二、效果展示

三、完整代码实现

<code><template>

<div>

<div class="cont">code>

<div class="title-cont">code>

<div class="title" v-for="item in titleList">code>

{ { item.title }}

</div>

</div>

<div class="table" id="table">code>

<div id="box1">code>

<div class="content" v-for="item in tableData">code>

<div class="item">{ { item.name }}</div>code>

<div class="item">{ { item.phone }}</div>code>

<div class="item">{ { item.age }}</div>code>

</div>

</div>

<div id="box2"></div>code>

</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>code>

.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>