当前位置：首页 > VUE

vue实现文字滚动效果

2026-01-23 16:06:18VUE

使用 CSS 动画实现文字滚动

通过 CSS @keyframes 和 transform 属性实现水平或垂直滚动效果。适用于简单文字滚动场景。

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

<script>
export default {
  data() {
    return {
      text: "这是一段需要滚动的文字内容，可以自定义长度..."
    }
  }
}
</script>

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

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

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

调整 translateX 为 translateY 可实现垂直滚动效果。动画时间通过修改 10s 调整速度。

使用 marquee 标签（兼容方案）

HTML 原生 <marquee> 标签简单但已废弃，适合快速实现基础效果。

vue实现文字滚动效果

<template>
  <marquee direction="left" behavior="scroll" scrollamount="5">
    {{ text }}
  </marquee>
</template>

基于 JavaScript 的动态计算滚动

通过 ref 获取元素宽度实现精确控制，适合动态内容。

<template>
  <div ref="scrollContainer" class="js-scroll-container">
    <div ref="scrollText" class="js-scroll-text">{{ text }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "动态计算的滚动文字..."
    }
  },
  mounted() {
    const container = this.$refs.scrollContainer
    const text = this.$refs.scrollText
    const distance = text.offsetWidth

    text.style.animationDuration = `${distance / 50}s`
  }
}
</script>

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

.js-scroll-text {
  display: inline-block;
  white-space: nowrap;
  animation: js-scroll linear infinite;
}

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

使用第三方库（vue-seamless-scroll）

专业级解决方案，支持丰富配置项：

vue实现文字滚动效果

安装库：
```
npm install vue-seamless-scroll
```

组件实现：


<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>

import vueSeamlessScroll from 'vue-seamless-scroll' export default { components: { vueSeamlessScroll }, data() { return { list: ['内容1', '内容2', '内容3'], option: { direction: 1, // 0向下 1向上 2向左 3向右 step: 0.5, // 步长 limitMoveNum: 2, // 起始展示数量 hoverStop: true // 悬停暂停 } } } } .seamless-wrap { height: 200px; overflow: hidden; } ```

无限循环滚动方案

通过复制内容实现无缝衔接效果：

<template>
  <div class="infinite-scroll">
    <div class="content" :style="{ animationDuration: duration + 's' }">
      <span v-for="(item, i) in duplicatedList" :key="i">{{ item }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ['list', 'duration'],
  computed: {
    duplicatedList() {
      return [...this.list, ...this.list]
    }
  }
}
</script>

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