基于interval的自动滚动（无缝滚动）组件

组件AutoScroll.vue

<script setup lang="ts">

const scrollRef = ref<HTMLElement>()
let timer: NodeJS.Timeout

function startScroll() {
  timer = setInterval(() => {
    if (scrollRef.value) {
      scrollRef.value.scrollTop += 1 // 速率
      let maxScrollTop = scrollRef.value.scrollHeight - scrollRef.value.clientHeight // 最大滚动高度
      if (scrollRef.value.scrollTop >= maxScrollTop) {
        scrollRef.value.scrollTop = 0 // 重置高度
      }
    }
  }, 50)// 速率
}

onMounted(() => {
  startScroll()
})

onBeforeUnmount(() => {
  clearInterval(timer)
})

</script>

<template>
  <div class="scroll-wrap no-scrollbar" ref="scrollRef">
    <slot></slot>
  </div>
</template>

<style scoped>
.scroll-wrap {
  width: 100%;
  height: 10rem;
  overflow-y: auto;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* 隐藏 IE, Edge 和 Firefox 的滚动条 */
.no-scrollbar {
  -ms-overflow-style: none;
  /* IE 和 Edge */
  scrollbar-width: none;
  /* Firefox */
}
</style>

使用方式

<AutoScroll>
	...
</AutoScroll>