当前位置：首页 > VUE

vue实现无缝滚动

2026-03-29 12:22:34VUE

实现无缝滚动的核心思路

无缝滚动的核心是通过动态复制内容并利用CSS动画或JavaScript控制滚动位置。当内容滚动到复制的副本时，瞬间跳回原始位置，形成无缝循环的视觉效果。

使用CSS动画实现

通过CSS的@keyframes和transform属性实现动画效果，适用于简单的横向或纵向滚动。

<template>
  <div class="scroll-container">
    <div class="scroll-content">
      <span v-for="(item, index) in list" :key="index">{{ item }}</span>
      <!-- 复制一份内容以实现无缝效果 -->
      <span v-for="(item, index) in list" :key="index + '_copy'">{{ item }}</span>
    </div>
  </div>
</template>

<style>
.scroll-container {
  width: 100%;
  overflow: hidden;
}
.scroll-content {
  display: inline-block;
  white-space: nowrap;
  animation: scroll 10s linear infinite;
}
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
</style>

使用JavaScript动态控制

通过requestAnimationFrame或定时器动态修改滚动位置，灵活性更高。

<template>
  <div class="scroll-container" ref="container">
    <div class="scroll-content" ref="content">
      <span v-for="(item, index) in list" :key="index">{{ item }}</span>
      <!-- 复制内容 -->
      <span v-for="(item, index) in list" :key="index + '_copy'">{{ item }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3'],
      speed: 2,
      animationId: null
    };
  },
  mounted() {
    this.startScroll();
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationId);
  },
  methods: {
    startScroll() {
      const container = this.$refs.container;
      const content = this.$refs.content;
      let offset = 0;

      const scroll = () => {
        offset += this.speed;
        if (offset >= content.scrollWidth / 2) {
          offset = 0;
        }
        content.style.transform = `translateX(-${offset}px)`;
        this.animationId = requestAnimationFrame(scroll);
      };
      scroll();
    }
  }
};
</script>

使用第三方库（如vue-seamless-scroll）

对于复杂需求，可直接使用现成库简化开发。

安装库：

npm install vue-seamless-scroll

示例代码：

vue实现无缝滚动

<template>
  <vue-seamless-scroll :data="list" :class-option="options">
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </vue-seamless-scroll>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll';
export default {
  components: { vueSeamlessScroll },
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3'],
      options: {
        direction: 1, // 1向上，2向下，3向左，4向右
        step: 1, // 步长
        limitMoveNum: 5, // 可见区域数量
        hoverStop: true // 悬停暂停
      }
    };
  }
};
</script>