快捷導(dǎo)航

基于vue.js實(shí)現(xiàn)無縫滾動(dòng)的兩種方法

更新時(shí)間：2026年02月27日 09:25:12 作者：Summer.Xia6552

在現(xiàn)代的網(wǎng)頁設(shè)計(jì)中,無縫滾動(dòng)廣告特效已經(jīng)變得非常流行,這種特效能夠吸引用戶的注意力,同時(shí)展示多個(gè)廣告內(nèi)容,這篇文章主要介紹了基于vue.js實(shí)現(xiàn)無縫滾動(dòng)的兩種方法,需要的朋友可以參考下

方法一：基于requestAnimationFrame

demo

<template>
  <h-page-container class="hoem-page">
    <h1>無縫滾動(dòng)</h1>
    <h2>垂直方向</h2>
    <div class="container1">
      <AutoScroll :data="list" :item-height="110" :limit-move-num="3" :is-rem="false">
        <template #item="{ keySuffix }">
          <div v-for="(item, index) in list" :key="`${item.id || index}${keySuffix || ''}`" class="card">
            <div>{{ item.title }}</div>
            <div>{{ item.content }}</div>
          </div>
        </template>
      </AutoScroll>
    </div>

    <h2>水平方向</h2>
    <div class="container2">
      <AutoScroll :data="list" :direction="2" :item-width="210" :limit-move-num="3" :is-rem="false">
        <template #item="{ keySuffix }">
          <div v-for="(item, index) in list" :key="`${item.id || index}${keySuffix || ''}`" class="card">
            <div>{{ item.title }}</div>
            <div>{{ item.content }}</div>
          </div>
        </template>
      </AutoScroll>
    </div>
  </h-page-container>
</template>

<script setup>
import { ref } from 'vue'
import AutoScroll from '@/components/AutoScroll.vue'

const list = ref([
  {
    id: 1,
    title: '卡片1',
    content: '111'
  },
  {
    id: 2,
    title: '卡片2',
    content: '222'
  },
  {
    id: 3,
    title: '卡片3',
    content: '333'
  },
  {
    id: 4,
    title: '卡片4',
    content: '444'
  }
])


</script>

<style lang="scss" scoped>
.hoem-page {
  width: 100%;
  height: 100vh;
  padding: 10px;
}

.container1 {
  width: 200px;
  height: 300px;
  margin: 20px;
  overflow: hidden;

  .card {
    width: 100%;
    height: 100px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 10px;
  }
}


.container2 {
  width: 500px;
  height: 150px;
  margin: 20px;
  overflow: hidden;

  .card {
    width: 200px;
    height: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-right: 10px;
    padding: 10px;
  }
}
</style>

AutoScroll.vue

<template>
  <div class="scroll-list" :style="listStyle" @mouseover="pauseAnimation" @mouseout="animate">
    <slot name="item" key-suffix=""></slot> <!-- 原始內(nèi)容 -->
    <template v-if="shouldDuplicate">
      <slot name="item" key-suffix="_copy"></slot> <!-- 復(fù)制內(nèi)容，添加后綴 -->
    </template>
  </div>
</template>

<script setup>
import { ref, onBeforeUnmount, watch, computed } from 'vue'
// 定義滾動(dòng)方向枚舉
const Direction = {
  DOWN: 0,
  UP: 1,
  LEFT: 2,
  RIGHT: 3
}

const props = defineProps({
  // 列表
  data: {
    type: Array,
    default: () => []
  },
  // 方向: 0 往下 1 往上 2 向左 3 向右
  direction: {
    type: Number,
    default: 1
  },
  /**
   * 一個(gè)列表元素的高度（包含外邊距)
   * direction為0 往下 1 往上時(shí)
   */
  itemHeight: {
    type: Number,
    default: null
  },
  /**
   * 一個(gè)列表元素的寬度（包含外邊距)
   * direction為2 向左 3 向右時(shí)
   */
  itemWidth: {
    type: Number,
    default: null
  },
  // itemHeight的單位是否是rem
  isRem: {
    type: Boolean,
    default: true
  },
  // 開啟無縫滾動(dòng)的數(shù)據(jù)量。
  limitMoveNum: {
    type: Number,
    default: 5
  },
  // 幾列
  columns: {
    type: Number,
    default: 1
  }
})

// 是否需要復(fù)制內(nèi)容
const shouldDuplicate = computed(() => props.data.length >= props.limitMoveNum)

const requestId = ref(null)
const offset = ref(0)

// 判斷是否為垂直方向
const isVertical = computed(() => props.direction === Direction.DOWN || props.direction === Direction.UP)

// 計(jì)算列表樣式
const listStyle = computed(() => ({
  transform: `${isVertical.value ? 'translateY' : 'translateX'}(${offset.value}${props.isRem ? 'rem' : 'px'})`,
  display: isVertical.value ? 'block' : 'flex'
}))

// 計(jì)算最大偏移量
const maxOffset = computed(() => {
  return Math.ceil(props.data.length / props.columns) *
    (isVertical.value ? props.itemHeight : props.itemWidth)
})

// 開始動(dòng)畫
const animate = () => {
  if (props.data?.length < props.limitMoveNum) return

  requestId.value = requestAnimationFrame(() => {
    animate()
    offset.value += (props.direction === Direction.UP || props.direction === Direction.LEFT) ? -0.3 : 0.3

    // 當(dāng)滾動(dòng)完一輪后重置位置
    if (Math.abs(offset.value) >= maxOffset.value) {
      offset.value = 0
    }
  })
}

// 暫停動(dòng)畫
const pauseAnimation = () => {
  if (requestId.value) {
    cancelAnimationFrame(requestId.value)
    requestId.value = null
  }
}

watch(() => props.data, (val) => {
  if (val?.length >= props.limitMoveNum) {
    pauseAnimation()
    animate()
  }
}, {
  immediate: true
})

onBeforeUnmount(() => {
  pauseAnimation()
})

</script>

<style lang="scss" scoped>
.scroll-list {
  width: 100%;
  height: 100%;
  /* 確保動(dòng)畫在合成層運(yùn)行 */
  backface-visibility: hidden;

  &>* {
    flex-grow: 0;
    flex-shrink: 0;
  }
}
</style>

**

方法二：基于animation動(dòng)畫

**
demo

<template>
  <h-page-container class="hoem-page">
    <h1>無縫滾動(dòng)</h1>
    <h2>垂直方向</h2>
    <div class="container1">
      <AutoScroll :data="list" :item-height="110" :limit-move-num="3">
        <template #item="{ keySuffix }">
          <div v-for="(item, index) in list" :key="`${item.id || index}${keySuffix || ''}`" class="card">
            <div>{{ item.title }}</div>
            <div>{{ item.content }}</div>
          </div>
        </template>
      </AutoScroll>
    </div>

    <h2>水平方向</h2>
    <div class="container2">
      <AutoScroll :data="list" :direction="2" :item-width="210" :limit-move-num="3">
        <template #item="{ keySuffix }">
          <div v-for="(item, index) in list" :key="`${item.id || index}${keySuffix || ''}`" class="card">
            <div>{{ item.title }}</div>
            <div>{{ item.content }}</div>
          </div>
        </template>
      </AutoScroll>
    </div>
  </h-page-container>
</template>

<script setup>
import { ref } from 'vue'
import AutoScroll from '@/components/AutoScroll.vue'

const list = ref([
  {
    id: 1,
    title: '卡片1',
    content: '111'
  },
  {
    id: 2,
    title: '卡片2',
    content: '222'
  },
  {
    id: 3,
    title: '卡片3',
    content: '333'
  },
  {
    id: 4,
    title: '卡片4',
    content: '444'
  }
])


</script>

<style lang="scss" scoped>
.hoem-page {
  width: 100%;
  height: 100vh;
  padding: 10px;
}

.container1 {
  width: 200px;
  height: 300px;
  margin: 20px;
  overflow: hidden;

  .card {
    width: 100%;
    height: 100px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 10px;
  }
}


.container2 {
  width: 500px;
  height: 150px;
  margin: 20px;
  overflow: hidden;

  .card {
    width: 200px;
    height: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-right: 10px;
    padding: 10px;
  }
}
</style>

AutoScroll.vue

<template>
  <div class="auto-scroll" :class="scrollClass" @mouseenter="setScrollPause(true)" @mouseleave="setScrollPause(false)">
    <div ref="scrollContent" class="scroll-content" :style="contentStyle">
      <slot name="item" :key-suffix="''"></slot>
      <template v-if="shouldDuplicate">
        <slot name="item" :key-suffix="'_copy'"></slot>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'

const props = defineProps({
  // 列表
  data: {
    type: Array,
    default: () => []
  },
  // 方向: 0 往下 1 往上 2 向左 3 向右
  direction: {
    type: Number,
    default: 0
  },
  /**
 * 一個(gè)列表元素的高度（包含外邊距)
 * direction為0 往下 1 往上時(shí)
 */
  itemHeight: {
    type: Number,
    default: 40
  },
  /**
 * 一個(gè)列表元素的寬度（包含外邊距)
 * direction為2 向左 3 向右時(shí)
 */
  itemWidth: {
    type: Number,
    default: 100
  },
  // 開啟無縫滾動(dòng)的數(shù)據(jù)量。
  limitMoveNum: {
    type: Number,
    default: 5
  },
  // 完整滾動(dòng)周期(秒)
  duration: {
    type: Number,
    default: 10
  },
  // 鼠標(biāo)懸浮暫停
  hoverPause: {
    type: Boolean,
    default: true
  }
})

const scrollContent = ref(null)
const isPaused = ref(false)

// 判斷是否為垂直方向
const isVertical = computed(() => props.direction <= 1)

// 是否需要復(fù)制內(nèi)容
const shouldDuplicate = computed(() => props.data.length >= props.limitMoveNum)

// 滾動(dòng)方向
const scrollClass = computed(() => [
  `direction-${props.direction}`,
  isVertical.value ? 'vertical' : 'horizontal'
])

// 內(nèi)容樣式計(jì)算
const contentStyle = computed(() => {
  const sizeProp = isVertical.value ? 'height' : 'width'
  const itemSize = isVertical.value ? props.itemHeight : props.itemWidth
  const contentSize = props.data.length * itemSize

  return {
    [sizeProp]: shouldDuplicate.value ? `${contentSize * 2}px` : `${contentSize}px`,
    'animation-duration': `${props.duration}s`,
    'animation-play-state': isPaused.value ? 'paused' : 'running'
  }
})

// 動(dòng)畫控制
const setScrollPause = (paused) => {
  if (props.hoverPause) {
    isPaused.value = paused
  }
}


// 生命周期
onMounted(() => {
  if (shouldDuplicate.value) {
    setScrollPause(false)
  }
})

onBeforeUnmount(() => {
  setScrollPause(true)
})
</script>

<style scoped>
.auto-scroll {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.scroll-content {
  position: absolute;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 垂直方向樣式 */
.vertical .scroll-content {
  width: 100%;
}

/* 水平方向樣式 */
.horizontal .scroll-content {
  height: 100%;
  display: flex;
}

/* 方向0: 往下 */
.direction-0 .scroll-content {
  top: 0;
  animation-name: scrollDown;
}

/* 方向1: 往上 */
.direction-1 .scroll-content {
  bottom: 0;
  animation-name: scrollUp;
}

/* 方向2: 向左 */
.direction-2 .scroll-content {
  left: 0;
  animation-name: scrollLeft;
}

/* 方向3: 向右 */
.direction-3 .scroll-content {
  right: 0;
  animation-name: scrollRight;
}

@keyframes scrollDown {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}

@keyframes scrollUp {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(50%);
  }
}

@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes scrollRight {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(50%);
  }
}
</style>