vue-seamless-scroll无缝滚动添加固定高亮

Vue Seamless Scroll 是一个 Vue.js 插件，它允许你在 Vue 应用中创建无限滚动的列表，使其看起来像一个无缝滚动的效果。当你需要在滚动过程中对某些特定元素进行固定高亮显示，比如分页指示、滚动条附近的信息提示等，可以这样做：

1. 首先，在 Vue 组件中安装并引入 `vue-seamless-scroll`，并在模板中设置无缝滚动的容器：

<template>
  <div class="scroll-container" v-seamless-scroll :options="{ height: '500px', scrollY: true }">
    <!-- 你的内容列表 -->
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.content }}</li>
    </ul>
    <!-- 固定高亮部分 -->
    <div class="highlight" v-if="showHighlight"></div>
  </div>
</template>

2. 定义数据属性来控制高亮状态和对应的元素高度：

<script>
export default {
  data() {
    return {
      items: [], // 数据源
      showHighlight: false, // 初始隐藏高亮
      highlightHeight: 40, // 高亮区域的高度
    };
  },
  methods: {
    onScroll(event) {
      if (event.position.y >= this.highlightHeight) {
        this.showHighlight = true;
      } else {
        this.showHighlight = false;
      }
    },
  },
  mounted() {
    this.$refs.scrollContainer.addEventListener('scroll', this.onScroll);
  },
  beforeDestroy() {
    this.$refs.scrollContainer.removeEventListener('scroll', this.onScroll);
  },
};
</script>

3. 样式方面，你可以调整 `.highlight` 的样式使其固定在顶部：

.highlight {
  position: fixed;
  top: 0;
  width: 100%;
  height: {{ highlightHeight }}px; /* 或者绑定到数据 */
  background-color: #f00; /* 高亮颜色 */
}