当前位置：首页 > VUE

vue实现无缝滚动

2026-02-17 12:38:48VUE

vue实现无缝滚动的几种方法

使用CSS动画实现

通过CSS的@keyframes和animation属性创建无限循环动画。将内容包裹在容器中，设置动画从右向左移动。

vue实现无缝滚动

<template>
  <div class="scroll-container">
    <div class="scroll-content">
      {{ text }}
    </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定时器

通过setInterval动态修改元素位置，实现更灵活的控制。需要计算内容宽度和滚动速度。

vue实现无缝滚动

export default {
  data() {
    return {
      position: 0,
      speed: 1,
      content: '需要滚动的内容文本'
    }
  },
  mounted() {
    setInterval(() => {
      this.position -= this.speed
      if (Math.abs(this.position) > this.$refs.content.offsetWidth) {
        this.position = 0
      }
    }, 16)
  }
}

使用第三方库

安装vue-seamless-scroll等专门库简化实现：

npm install vue-seamless-scroll

<template>
  <vue-seamless-scroll 
    :data="list" 
    :class-option="option"
  >
    <ul>
      <li v-for="item in list">{{ item }}</li>
    </ul>
  </vue-seamless-scroll>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  components: { vueSeamlessScroll },
  data() {
    return {
      list: ['内容1', '内容2', '内容3'],
      option: {
        direction: 1,
        step: 0.5
      }
    }
  }
}
</script>

双容器克隆技术

创建两个相同内容的容器，交替显示实现无缝效果：

<template>
  <div class="wrapper" ref="wrapper">
    <div class="content" ref="content1">{{ text }}</div>
    <div class="content" ref="content2">{{ text }}</div>
  </div>
</template>

<script>
export default {
  mounted() {
    const wrapper = this.$refs.wrapper
    const content1 = this.$refs.content1
    const content2 = this.$refs.content2

    let pos = 0
    setInterval(() => {
      pos -= 1
      if (pos <= -content1.offsetWidth) pos = 0
      wrapper.style.transform = `translateX(${pos}px)`
    }, 16)
  }
}
</script>