当前位置：首页 > VUE

vue表格实现自动滚动

2026-01-21 11:56:01VUE

Vue 表格实现自动滚动的方法

使用 CSS 动画实现滚动 通过 CSS 的 @keyframes 和 animation 属性实现表格内容自动滚动。将表格内容包裹在一个固定高度的容器中，通过动画控制 transform 或 margin-top 变化。

<template>
  <div class="scroll-container">
    <table class="auto-scroll-table">
      <!-- 表格内容 -->
    </table>
  </div>
</template>

<style>
.scroll-container {
  height: 300px;
  overflow: hidden;
}

.auto-scroll-table {
  animation: scroll 10s linear infinite;
}

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

通过 JavaScript 定时器控制滚动 利用 Vue 的 data 和 methods 结合 setInterval 动态修改表格容器的 scrollTop 属性，实现平滑滚动效果。

<template>
  <div ref="scrollContainer" class="scroll-container">
    <table>
      <!-- 表格内容 -->
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollInterval: null
    };
  },
  mounted() {
    this.startScrolling();
  },
  beforeDestroy() {
    clearInterval(this.scrollInterval);
  },
  methods: {
    startScrolling() {
      const container = this.$refs.scrollContainer;
      let step = 1;
      this.scrollInterval = setInterval(() => {
        if (container.scrollTop >= container.scrollHeight - container.clientHeight) {
          container.scrollTop = 0;
        } else {
          container.scrollTop += step;
        }
      }, 50);
    }
  }
};
</script>

使用第三方库（如 vue-seamless-scroll） 对于复杂需求，可使用专为 Vue 设计的滚动库。安装后通过配置参数快速实现无缝滚动。

npm install vue-seamless-scroll

<template>
  <vue-seamless-scroll :data="tableData" class="scroll-container">
    <table>
      <!-- 动态渲染表格 -->
    </table>
  </vue-seamless-scroll>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll';
export default {
  components: { vueSeamlessScroll },
  data() {
    return {
      tableData: [...] // 表格数据
    };
  }
};
</script>