一个跑马灯效果

 let timer=null
    let translateHeight=0;
    let scrollHeight=0;
    let itemHeight=0;
    const scrollUp=(ele)=>{
        if(translateHeight%itemHeight==0){
            clearInterval(timer);
            setTimeout(()=>scrollMove(ele),1000);
        }else{
          translateHeight++;
          ele.style.transform = `translateY(-${translateHeight}px)`;
          if(translateHeight>=scrollHeight/2){    //判断滚动高度,当滚动高度大于area本身的高度时，使其回到原点重新滚动 
              translateHeight=0   
              ele.style.transform = `translateY(0px)`; 
          }
      
        }        
      }
    const scrollMove=(ele)=>{
        translateHeight++;
        ele.style.transform = `translateY(-${translateHeight}px)`; 
        timer = setInterval(()=>scrollUp(ele),10);
    }


    useEffect(()=>{

        window.$$getComputedStyle(document.querySelector('#rollCotent'), ['height']).then(res => {
            let rollCotent=document.querySelector('#rollCotent')
            let tempHeight=res.height.replace('px','')
            scrollHeight=Number(tempHeight)
            itemHeight=scrollHeight/(data.length*2)
            scrollMove(rollCotent)
        },err=>{
            console.log('err',err)
        })
    },[])

有时间改一个translate版本，这个思路可以实现单行轮播停顿