vue3-seamless-scroll实现无缝滚动并且显示滚动条可以鼠标滚轮滚动

Vue3 Seamless Scroll是一个轻量级的基于Vue 3的插件，它实现了平滑的无缝滚动效果，并允许你在需要的时候显示滚动条以及使用鼠标滚轮进行滚动。该插件的主要特点包括：

1. **无缝滚动**：当你滚动到页面底部时，内容会自动加载更多数据，使得滚动体验看起来像是在一个连续的视口中，而不是有分段的。

2. **自适应滚动条**：默认情况下，滚动条会隐藏起来，只有当用户需要查看时才会显示。这样可以保持页面的视觉整洁，但在需要时通过设置选项可以让滚动条始终可见。

3. **鼠标滚轮支持**：用户可以使用鼠标滚轮控制内容的上下滚动，提供了传统网页滚动的便利性。

使用此插件，你需要先安装并在组件上应用`seamless-scroll`指令，然后配置合适的选项，例如初始可见的行数、滚动加载的行为等。示例代码可能会像这样：

<template>
  <div v-seamless-scroll :options="{ loadMoreDistance: 500, scrollbar: true }">
    <!-- 这里是你的列表项 -->
  </div>
</template>

<script>
import { useSeamlessScroll } from 'vue3-seamless-scroll';

export default {
  setup() {
    const { ref, onRefresh, isRefreshing, refreshHeight } = useSeamlessScroll();
    
    // 使用ref管理可视区域高度
    const scrollbarHeightRef = ref(0);
    
    return {
      scrollbarHeight: scrollbarHeightRef.value,
      onRefresh: () => {
        // 加载更多数据
      },
      isRefreshing: isRefreshing,
      refreshHeight: refreshHeight,
    };
  }
}
</script>