首先上一張效果圖

原理

圖1

圖2

在可視區(qū)域內(nèi)，list1向上滾動(dòng)，在滾動(dòng)至圖2的位置時(shí)，達(dá)到滾動(dòng)連接臨界點(diǎn)。由于list2與list1的數(shù)據(jù)一模一樣，視覺(jué)上達(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)過(guò)時(shí)，滾動(dòng)停止
    box.onmouseover=function(){
        clearInterval(scrollMove)
    }

    //鼠標(biāo)離開(kāi)時(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)到此完成！