首先上一張效果圖
原理
圖1
圖2
在可視區(qū)域內(nèi)，list1向上滾動(dòng)座咆，在滾動(dòng)至圖2的位置時(shí)痢艺，達(dá)到滾動(dòng)連接臨界點(diǎn)。由于list2與list1的數(shù)據(jù)一模一樣介陶，視覺上達(dá)到了一個(gè)無(wú)縫銜接的效果堤舒。此時(shí)讓滾動(dòng)位置迅速歸0，list1回到初始位置哺呜，如圖1舌缤，實(shí)現(xiàn)無(wú)縫滾動(dòng)。
代碼
//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的數(shù)據(jù)某残，使得list2和list1的數(shù)據(jù)一樣
function scrollup(){
if(box.scrollTop>=l1.offsetHeight){ //滾動(dòng)條距離頂部的值恰好等于list1的高度時(shí)国撵，達(dá)到滾動(dòng)臨界點(diǎn)，此時(shí)將讓scrollTop=0,讓list1回到初始位置玻墅，實(shí)現(xiàn)無(wú)縫滾動(dòng)
box.scrollTop=0;
}else{
box.scrollTop++;
}
}
var scrollMove=setInterval(scrollup,30);//數(shù)值越大介牙，滾動(dòng)速度越慢
//鼠標(biāo)經(jīng)過時(shí)，滾動(dòng)停止
box.onmouseover=function(){
clearInterval(scrollMove)
}
//鼠標(biāo)離開時(shí)椭豫，滾動(dòng)繼續(xù)
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無(wú)縫滾動(dòng)到此完成！
