「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」。
在做一个大屏项目的，需要实现对一个列表页数据和图片img头像的轮番滚动。第一次我的思路是使用用css3中的animation动画来制作，并且初步效果还不错，但是细看会有一些较为明显的图片抖动，在查阅了一段时间后我放弃了利用css3在大屏上展示图片效果的想法。紧接着将思路转向js。
首先我们来看一张图片。
红色框框和橙色框框表示我们要展示数据的盒子（忘记换颜色笔了）。绿色部分表示要展示数据数据在盒子之外超出部分隐藏。很显然数据在往上滚动的时候总有滚完的时候，那么这个时候我们应该怎么实现无缝滚动呢。
思路
无缝：在展示最后一条数据的同时展示第一条数据， 那么我们该怎么做呢，准备数据的时候再加一份数据列表,使得展示盒子中的数据有两份并是从头开始的一份再加一份。那么数据滚动的时候会有最后一条数据和第一条同时展示的无缝效果。
moveBox0.innerHTML += moveBox0.innerHTML
无限：在做到无缝之后怎么做到可以无限的循环滚动呢。当第一份数据滚动到底部的时候这个时候意味着数据1已经展示完毕，而目前展示盒子中展示的是数据二，如图
那么显然，只要我们数据1在离开显示盒子的那一刻，让整个数据向上滚动变为0，那么数据1就会回到数据2的位置接着滚动，周而复始就形成了无缝无限滚动。
思路理清了我们来看看代码：
<div class="detail">
<div class="eventDetail " v-for="(item,index) in eventDetail" :key="index">
<div class="eventDetailName eventDetailAll ">{{item.name}}</div>
<div class="eventDetailallowNum eventDetailAll FlexAble">{{item.SumNum}}</div>
<div class="eventDetailsuccessNum eventDetailAll FlexAble changeColor">{{item.AddNum}}</div>
</div>
</div>
//对盒子的 布局 detail为展示盒子 eventDetail中为数据
本人用的Vue，需要挂载在mouted生命周期中。
mounted(){
let moveBox0 = document.getElementsByClassName('detail')[1] //列表盒子
moveBox0.innerHTML += moveBox0.innerHTML //列表盒子翻倍
let list = document.getElementsByClassName('eventDetail')
let height0 = list[0].offsetHeight //首先获取每一条数据的高度
let moveBoxHeight0 = height0*(list.length)//计算翻倍后列表数据的高度
console.log(moveBoxHeight0,'高度')
let speed = 30//设置每30毫秒挪动距离
function move(){
moveBox0.scrollTop = moveBox0.scrollTop+ 1//列表数据向上滚动1个像素
if(moveBox0.scrollTop >=(moveBoxHeight0/2)){//向上滚动，当靠上的初始数据滚动完时归位
moveBox0.scrollTop = 0
}
}
let timer = setInterval(move,speed)//设置定时器
moveBox0.onmouseover = () =>{ clearInterval(timer)}//鼠标移入打开定时器
moveBox0.onmouseout = function(){timer = setInterval(move,speed)}//鼠标移出关闭定时器
},
感谢读者大大的阅读，作为一个前端小白，写作的内容多少会有点瑕疵，如果写的文章有不好值得纠正的地方，欢迎各位读者大大们的指正和探讨。
