当前位置：首页 > VUE

vue实现向右无缝滚动

2026-02-22 16:02:28VUE

实现无缝向右滚动的思路

无缝滚动通常通过动态调整内容位置或克隆节点实现。核心原理是当内容滚动到尽头时，快速重置位置并继续滚动，利用视觉暂留效应形成无缝效果。

基于CSS动画的实现

使用CSS的@keyframes和transform属性实现动画效果，结合Vue的数据绑定控制滚动内容。

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

<script>
export default {
  data() {
    return {
      list: ['内容1', '内容2', '内容3', '内容4'],
      scrollWidth: 0
    }
  },
  computed: {
    doubleList() {
      return [...this.list, ...this.list] // 克隆内容实现无缝衔接
    },
    contentStyle() {
      return {
        animation: `scroll ${this.list.length * 2}s linear infinite`,
        width: `${this.scrollWidth}px`
      }
    }
  },
  mounted() {
    this.calculateWidth()
  },
  methods: {
    calculateWidth() {
      const container = this.$el.querySelector('.scroll-content')
      this.scrollWidth = container.scrollWidth / 2
    }
  }
}
</script>

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

.scroll-content {
  display: inline-block;
}

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

基于JavaScript定时器的实现

通过定时器动态修改元素的scrollLeft属性实现滚动，适合需要精确控制滚动速度的场景。

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

<script>
export default {
  data() {
    return {
      list: ['内容1', '内容2', '内容3', '内容4'],
      scrollSpeed: 2,
      animationFrame: null
    }
  },
  computed: {
    doubleList() {
      return [...this.list, ...this.list]
    }
  },
  mounted() {
    this.startScroll()
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationFrame)
  },
  methods: {
    startScroll() {
      const container = this.$refs.container
      const content = this.$refs.content
      const totalWidth = content.scrollWidth / 2
      let scrollLeft = 0

      const scroll = () => {
        scrollLeft += this.scrollSpeed
        if (scrollLeft >= totalWidth) {
          scrollLeft = 0
        }
        container.scrollLeft = scrollLeft
        this.animationFrame = requestAnimationFrame(scroll)
      }
      this.animationFrame = requestAnimationFrame(scroll)
    }
  }
}
</script>

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

.scroll-content {
  display: inline-block;
}
</style>