JS实现无缝滚动

首先上一张效果图


原理

JS实现无缝滚动_第1张图片
图1
JS实现无缝滚动_第2张图片
图2

在可视区域内,list1向上滚动,在滚动至图2的位置时,达到滚动连接临界点。由于list2与list1的数据一模一样,视觉上达到了一个无缝衔接的效果。此时让滚动位置迅速归0,list1回到初始位置,如图1,实现无缝滚动。

代码

//html代码
  • 星期一
  • 星期二
  • 星期三
  • 星期四
  • 星期五
  • 星期六
  • 星期天
    //js
    
    
    //css
    
    

    js无缝滚动到此完成!

    你可能感兴趣的:(JS实现无缝滚动)