小福餅 關注

2018.03.22 17:19 字數 116 閱讀 98評論 1喜歡 1

首先上一張效果圖

原理

圖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無縫滾動到此完成！

來源：https://www.jianshu.com/p/f695592f3200