当前位置：首页 > VUE

vue 实现无缝滚动

2026-01-17 03:44:03VUE

Vue 实现无缝滚动的方法

无缝滚动是网页中常见的交互效果，可以通过多种方式实现。以下是几种常见的实现方法：

使用 CSS 动画

通过 CSS 的 animation 属性可以实现简单的无缝滚动效果。定义一个动画，使内容从右向左移动，并在动画结束时重置位置。

<template>
  <div class="scroll-container">
    <div class="scroll-content">
      {{ content }}
    </div>
  </div>
</template>

<style>
.scroll-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.scroll-content {
  display: inline-block;
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>

使用 JavaScript 动态控制

通过 JavaScript 动态计算内容的位置，实现更灵活的无缝滚动效果。使用 requestAnimationFrame 或 setInterval 控制滚动行为。

<template>
  <div class="scroll-container" ref="container">
    <div class="scroll-content" ref="content">
      {{ content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '需要滚动的内容',
      speed: 2,
      position: 0,
      animationId: null
    };
  },
  mounted() {
    this.startScroll();
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationId);
  },
  methods: {
    startScroll() {
      const containerWidth = this.$refs.container.offsetWidth;
      const contentWidth = this.$refs.content.offsetWidth;

      const animate = () => {
        this.position -= this.speed;
        if (this.position <= -contentWidth) {
          this.position = containerWidth;
        }
        this.$refs.content.style.transform = `translateX(${this.position}px)`;
        this.animationId = requestAnimationFrame(animate);
      };

      animate();
    }
  }
};
</script>

使用第三方库

如果需要更复杂的功能，可以考虑使用第三方库如 vue-seamless-scroll。安装后直接使用组件即可实现无缝滚动。

vue 实现无缝滚动

npm install vue-seamless-scroll --save

<template>
  <vue-seamless-scroll :data="list" :class-option="option" 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'],
      option: {
        direction: 1,
        step: 1,
        limitMoveNum: 5,
        hoverStop: true
      }
    };
  }
};
</script>