JS实现无缝滚动上

 小福饼 关注

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