vue-seamless-scroll 表头固定不滚动

Vue Seamless Scroll 是一个 Vue.js 插件，用于实现无限滚动和表头固定的无缝滚动效果。当使用这个插件时，你可以让滚动条保持在内容区域下方，而表头始终保持在顶部，即使内容区域随着用户的滚动而无限加载。

要实现表头固定不滚动的功能，你需要按照以下步骤配置：

1. 安装和引入插件：
使用 npm 或者 yarn 安装 `vue-seamless-scroll`：

   npm install vue-seamless-scroll
   // 或者
   yarn add vue-seamless-scroll

在你的 Vue 项目中导入并使用该插件：

   import { SeamlessScroll } from 'vue-seamless-scroll'
   export default {
     components: {
       SeamlessScroll
     }
   }

2. 在需要应用无缝滚动的元素上使用组件：

   <template>
     <div class="scroll-container">
       <table>
         <thead>...</thead>
         <seamless-scroll :data="yourData" :options="{ ... }">
           <tbody>
             <!-- 这里是你动态加载的数据 -->
           </tbody>
         </seamless-scroll>
       </table>
     </div>
   </template>

3. 配置选项（可选）：
- `:offsetTop` 设置表头固定距离顶部的距离。
- `:contentWrapperClass` 可以为内容区域添加自定义 CSS 类，以便更好地控制样式。

4. 控制表头固定：
默认情况下，表头会随着内容滚动。如果你想要固定表头，可以在 CSS 中设置表头元素（thead）的 `position` 为 `fixed`，并且调整其 `top`、`left` 和 `right` 属性使其与视口对齐。同时，记得给滚动区域设置 `overflow-y: auto` 以限制垂直滚动。

thead {
  position: fixed;
  top: 0; /* 表头距离顶部的距离 */
  left: 0;
  right: 0;
  overflow-x: hidden;
}
.scroll-container {
  overflow-y: auto; /* 仅允许垂直滚动 */
}