当前位置：首页 > VUE

vue 实现无缝滚动

2026-03-09 08:46:25VUE

实现无缝滚动的核心思路

无缝滚动的核心在于当内容滚动到末尾时，能够无感知地衔接开头部分，形成视觉上的无限循环。Vue中可以通过动态数据绑定和CSS动画或JavaScript定时器实现。

使用CSS动画实现

通过CSS的@keyframes定义滚动动画，结合Vue的动态绑定控制内容循环。

vue 实现无缝滚动

<template>
  <div class="scroll-container">
    <div class="scroll-content" :style="{ animation: `scroll ${duration}s linear infinite` }">
      <span v-for="(item, index) in list" :key="index">{{ item }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['内容1', '内容2', '内容3', '内容4'],
      duration: 5
    };
  }
};
</script>

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

使用JavaScript定时器实现

通过定时器动态修改内容的transform属性，实现更灵活的控制。

<template>
  <div class="scroll-container" ref="container">
    <div class="scroll-content" ref="content">
      <span v-for="(item, index) in doubledList" :key="index">{{ item }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['内容1', '内容2', '内容3', '内容4'],
      speed: 2,
      position: 0
    };
  },
  computed: {
    doubledList() {
      return [...this.list, ...this.list];
    }
  },
  mounted() {
    this.startScroll();
  },
  methods: {
    startScroll() {
      const containerWidth = this.$refs.container.offsetWidth;
      const contentWidth = this.$refs.content.offsetWidth;
      const maxScroll = contentWidth / 2;

      setInterval(() => {
        this.position -= this.speed;
        if (Math.abs(this.position) >= maxScroll) {
          this.position = 0;
        }
        this.$refs.content.style.transform = `translateX(${this.position}px)`;
      }, 16);
    }
  }
};
</script>

<style>
.scroll-container {
  overflow: hidden;
  white-space: nowrap;
}
.scroll-content {
  display: inline-block;
}
</style>

使用第三方库vue-seamless-scroll

对于复杂场景，可以使用专门的无缝滚动库简化实现。

vue 实现无缝滚动

安装依赖：

npm install vue-seamless-scroll

示例代码：

<template>
  <vue-seamless-scroll
    :data="list"
    :class-option="options"
    class="seamless-wrap"
  >
    <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: ['内容1', '内容2', '内容3', '内容4'],
      options: {
        direction: 1,
        limitMoveNum: 2,
        step: 1,
        hoverStop: true
      }
    };
  }
};
</script>

<style>
.seamless-wrap {
  overflow: hidden;
}
</style>