本文介绍如何在数据可视化场景中，利用原生JavaScript结合scrollTop属性与定时器，手动封装一个可复用的表格无缝循环滚动组件。通过复制内容实现视觉上的无限滚动，无需依赖第三方插件，适用于大屏展示等需要持续更新数据的场景。
在数据可视化大屏开发中，经常遇到需要展示滚动表格的需求。为了保持组件的轻量与可复用性，这里选择不依赖第三方插件，而是通过原生代码自行封装实现。
直接切入主题，以下是具体的实现方案与代码细节。
一、利用scrollTop、定时器实现滚动效果
核心原理是利用DOM元素的属性来控制滚动条的偏移距离。通过定时器不断修改该值，即可驱动表格内容向上或向下滚动。
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>总结
以上就是利用JavaScript实现自定义表格滚动效果的完整方案。更多相关技术细节，建议参考本站历史文章或持续关注后续更新，感谢支持。