jquery 实现平滑无缝上滚

有些插件可以实现，但是目测不够平滑

思路：

1、先写好无动画样式

2、获取盒子dom,及第一个子元素

3、第一个子元素开启动画，通过修改marginTop值，向上滚动，完全消失时，再添加到最后

避坑点：

1、要先删除再添加否则，很容易出现重叠

2、要考虑间隔，否则不会平滑

3、定时器时间要足够小，才能忽略每次执行的停顿

<div class="parent-box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

let step = 0
let top = 10 //子元素间隔
function textUp(){
  let parent = $('.parent-box')     
  let first = $('.parent-box>div:first')
  let height = first.height() + top
  first.animate({
    marginTop:(top+step)+'px'
  },0,'linear',function(){
   if(!first.is(':naimated')){
        if(step<=-height){
            step = 0
            first.remove()
            first.css('margin-top':top+'px').appendTo(parent)
        }else{
            step = step - 0.2
            
        }
   }
 
 })
  
}

setInterval(function(){
    textUp()
},10)