封装js方法实现无缝循环滚动效果

封装插件了

一步到位https://blog.csdn.net/chuenst/article/details/139095523

如下图，又遇到了无缝循环滚动这个需求

突然想到我之前有分享过一篇关于这个的文章https://blog.csdn.net/chuenst/article/details/137125377，果断打开csdn准备cv

经过我一顿操作，很快实现了需求，但是这风扇直接嗡嗡转，直接感到不妙
算了看看网上有没有轮子
于是我找到了 vue3-seamless-scroll 立马开工
很快我就装上了这个轮子，虽然风扇不转了
但是数据多了的话循环一轮之后就卡一下，不是无缝衔接，找了好多也没找到解决办法

于是决定继续修自己的轮子，于是就有了以下代码

//html
<div class="scroll">
  <div class="scrollContainer" ref="scrollContainer">
    <div class="l-item" v-for="(item, index) in leftList" :key="index">
      ...
    </div>
  </div>
</div>

//css
.scroll {
  height: 800px;
  overflow: hidden;
}

//js
//封装方法
function toScroll(e: any) {
  let sc = e.el;
  if (sc && typeof sc === "object" && sc !== null) {
    let contentHeight = sc.offsetHeight;
    if (contentHeight < sc.parentElement.offsetHeight) return
    let distance = 0
    if (e.direction == 'down') distance = -contentHeight
    sc.append(sc.cloneNode(sc))
    let timer = null
    if (timer) clearInterval(timer)
    timer = setInterval(() => {
      if (e.direction == 'up') {
        if (distance * -1 < contentHeight) distance--
        else distance = 0
        sc.style.transform = 'translate(0px, ' + distance + 'px)';;
      } else if (e.direction == 'down') {
        if (distance < 0) distance++
        else distance = -contentHeight
        sc.style.transform = 'translate(0px, ' + distance + 'px)';
      }

    }, e.step || 3);
  }
}
//调用
toScroll({
  el: scrollContainer.value,
  step: 3,
  direction: 'up'
})