当前位置：首页 > VUE

vue实现无缝横滚

2026-01-18 09:48:30VUE

Vue实现无缝横滚效果

实现无缝横滚的核心思路是动态调整内容位置，利用CSS动画或JavaScript控制滚动，确保内容循环时无视觉断层。以下是两种常见实现方式：

使用CSS动画实现

通过transform和@keyframes实现无限循环滚动，适用于纯展示型内容：

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

<script>
export default {
  data() {
    return {
      list: ['Item1', 'Item2', 'Item3', 'Item4', 'Item5']
    }
  }
}
</script>

<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(0); }
  100% { transform: translateX(-100%); }
}
</style>

使用JavaScript动态控制

通过定时器动态修改内容位置，适合需要交互控制的场景：

vue实现无缝横滚

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

<script>
export default {
  data() {
    return {
      list: ['A', 'B', 'C', 'D'],
      scrollSpeed: 2,
      duplicatedList: []
    }
  },
  mounted() {
    this.duplicatedList = [...this.list, ...this.list];
    this.startScroll();
  },
  methods: {
    startScroll() {
      const container = this.$refs.container;
      const content = this.$refs.content;
      let position = 0;

      const animate = () => {
        position -= this.scrollSpeed;
        if (-position >= content.scrollWidth / 2) {
          position = 0;
        }
        content.style.transform = `translateX(${position}px)`;
        requestAnimationFrame(animate);
      };
      animate();
    }
  }
}
</script>

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

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