vue3实现无限循环滚动的方法；el-table内容无限循环滚动的实现

需求：vue3实现一个div内的内容无限循环滚动

方法一：

方法二：

方法三：

补充：el-table实现内容无限循环滚动方法：

let scrollHeight = 0
let currentScrollTop = 0
let maxScrollTop = 0
let timeInter = null
let timeInter2 = null
const tableNode = ref(null)

function updateList() {
  // 数据大于3条才会滑动
  if (tableData && tableData.value.length > 4) {
    // 获取滑动区域DOM 最新版本的element-plus节点有变化, 此版本为1.2.0-beta.3
    tableNode.value = tableRef.value.$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]    // 设置每次滑动几行
    scrollHeight = tableNode.value.querySelectorAll('tr')[0].offsetHeight * 4
    // 设置每次滑动的PX和滑动区域的高度
    tableNode.value.style.height = `${scrollHeight}px`
    // 获取最大滑动空间
    maxScrollTop = tableNode.value.firstElementChild.offsetHeight - scrollHeight
    // 开始
    restTimeInter()
  }
}

function restTimeInter() {
  // 清除所有定时器
  clearAllInterval()
  // 设置定时器
  timeInter = setInterval(setMultiLine, 1500)
}
function clearAllInterval() {
  clearInterval(timeInter)
  clearInterval(timeInter2)
}
function setScrollTop() {
  tableNode.value.scrollTop++
  if (tableNode.value.scrollTop >= currentScrollTop) { // 达到下次应该滑动的位置
    clearInterval(timeInter2)
  }
  if (tableNode.value.scrollTop > maxScrollTop) { // 滑到底了
    tableNode.value.scrollTop = maxScrollTop
    clearInterval(timeInter2)
  }
}
function setMultiLine() {
  // 下次应该滑到哪
  currentScrollTop = (tableNode.value.scrollTop || 0) + scrollHeight + currentScrollTop % scrollHeight
  if (tableNode.value.scrollTop >= maxScrollTop) { // 滑完了 重置
    currentScrollTop = 0
    tableNode.value.scrollTop = 0
    restTimeInter()
  } else {
    // 清除上一个定时器
    clearInterval(timeInter2)
    // 开始滑
    timeInter2 = setInterval(setScrollTop, 10)
  }
}
onMounted(()=> {
      setTimeout(() => {
        updateList()
      }, 1000)
})

以上三种方法均能实现无限循环滚动，但是滚动的效果不是无缝衔接的，是滚动到最底部后直接闪现到内容顶部开始重新滚动；要想实现无缝衔接滚动，目前用js是难以实现的，为此花费了好长时间也没能实现，最后在bd中查到了可以实现这一功能的插件，比如vue3-seamless-scroll插件，具体的插件安装和使用可自行百度；