首先上一张效果图
原理
图1
图2
在可视区域内，list1向上滚动，在滚动至图2的位置时，达到滚动连接临界点。由于list2与list1的数据一模一样，视觉上达到了一个无缝衔接的效果。此时让滚动位置迅速归0，list1回到初始位置，如图1，实现无缝滚动。
代码
//html代码
<div id="box">
<ul id="list1">
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
<li>星期天</li>
</ul>
<ul id="list2"></ul>
</div>
//js
<script type="text/javascript">
var box=document.getElementById("box");
var l1=document.getElementById("list1");
var l2=document.getElementById("list2");
l2.innerHTML=l1.innerHTML;//克隆list1的数据，使得list2和list1的数据一样
function scrollup(){
if(box.scrollTop>=l1.offsetHeight){ //滚动条距离顶部的值恰好等于list1的高度时，达到滚动临界点，此时将让scrollTop=0,让list1回到初始位置，实现无缝滚动
box.scrollTop=0;
}else{
box.scrollTop++;
}
}
var scrollMove=setInterval(scrollup,30);//数值越大，滚动速度越慢
//鼠标经过时，滚动停止
box.onmouseover=function(){
clearInterval(scrollMove)
}
//鼠标离开时，滚动继续
box.onmouseout=function(){
scrollMove=setInterval(scrollup,30);
}
</script>
//css
<style>
*{margin:0; padding:0;}
ul,li{list-style: none;}
#box{ width: 200px; height:90px; overflow:hidden; border:1px solid red;}
</style>
js无缝滚动到此完成！
