witSeamlessScroll 无缝滚动

witSeamlessScroll是一个基于 Vue 3 封装的无缝滚动组件，支持自定义滚动速度和方向，提供鼠标悬停暂停功能，使用 requestAnimationFrame 优化动画性能。

用法实列

<template>
  <div style="height: 200px; width: 300px; border: 1px solid #eee;">
    <witSeamlessScroll :speed="200" direction="up">
      <div v-for="item in list" :key="item" style="padding: 10px; border-bottom: 1px dashed #eee;">
        {{ item }}
      </div>
    </witSeamlessScroll>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const list = ref([
  '列表项 1',
  '列表项 2',
  '列表项 3',
  '列表项 4',
  '列表项 5',
  '列表项 6',
  '列表项 7',
  '列表项 8',
  '列表项 9',
  '列表项 10'
])
</script>

API

属性名	类型	默认值	描述
speed	[Number]	180	滚动速度，数值越大速度越快
direction	[String]	'up'	滚动方向，可选值：'up'（向上）、'down'（向下）

插槽

插槽名	描述
default	滚动内容的插槽

事件

事件名	描述	参数
-	无自定义事件	-

暴露的方法

方法名	描述	参数
reset	重置滚动位置到初始状态	-

TIP

1. 组件需要在固定高度的容器内使用，以便正确计算滚动区域
2. 鼠标悬停时会自动暂停滚动，鼠标离开后恢复滚动
3. 支持向上和向下两种滚动方向
4. 使用 requestAnimationFrame 优化动画性能，减少浏览器卡顿
5. 当内容高度小于容器高度时，不会执行滚动动画