当前位置：首页 > VUE

vue实现上下滚动

2026-01-17 16:05:22VUE

Vue 实现上下滚动效果

实现上下滚动效果可以通过多种方式完成，以下是几种常见的方法：

使用 CSS 动画

通过 CSS 的 animation 和 @keyframes 实现简单的上下滚动效果。

<template>
  <div class="scroll-container">
    <div class="scrolling-text">这里是需要滚动的内容</div>
  </div>
</template>

<style>
.scroll-container {
  height: 100px;
  overflow: hidden;
  position: relative;
}

.scrolling-text {
  position: absolute;
  animation: scroll 5s linear infinite;
}

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

使用 JavaScript 动态控制

通过 Vue 的 ref 和 JavaScript 动态修改样式实现更灵活的滚动控制。

<template>
  <div class="scroll-container" ref="scrollContainer">
    <div class="scrolling-text" ref="scrollingText">这里是需要滚动的内容</div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.startScrolling();
  },
  methods: {
    startScrolling() {
      const container = this.$refs.scrollContainer;
      const text = this.$refs.scrollingText;
      let position = 0;

      setInterval(() => {
        position -= 1;
        if (position <= -text.clientHeight) {
          position = container.clientHeight;
        }
        text.style.transform = `translateY(${position}px)`;
      }, 30);
    }
  }
};
</script>

<style>
.scroll-container {
  height: 100px;
  overflow: hidden;
  position: relative;
}

.scrolling-text {
  position: absolute;
}
</style>

使用第三方库

如果需要更复杂的效果，可以引入第三方库如 vue-seamless-scroll。

安装库：

npm install vue-seamless-scroll

使用示例：

vue实现上下滚动

<template>
  <vue-seamless-scroll
    :data="list"
    :class-option="option"
    class="seamless-warp"
  >
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </vue-seamless-scroll>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll';

export default {
  components: { vueSeamlessScroll },
  data() {
    return {
      list: ['内容1', '内容2', '内容3', '内容4', '内容5'],
      option: {
        direction: 1, // 0 向下，1 向上
        step: 0.5,    // 步长
        limitMoveNum: 5 // 起始渲染量
      }
    };
  }
};
</script>

<style>
.seamless-warp {
  height: 200px;
  overflow: hidden;
}
</style>