VUE自定义滚动表格

 <div 
    class="scroll-container" 
    @mouseenter="pauseScroll" 
    @mouseleave="resumeScroll" 
    @wheel.prevent="handleScroll"
  >
    <div class="table-wrapper" :style="{ transform: `translateY(-${scrollPosition}px)` }">
      <table>
        <tbody>
          <tr v-for="(item, index) in items" :key="index">
            <td>{{ item }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

    startScroll() {
      this.interval = setInterval(() => {
        this.scrollPosition += this.scrollSpeed;

        // 判断是否滚动到末尾，重置位置
        if (this.scrollPosition >= this.$el.querySelector('tbody').offsetHeight / 2) {
          this.scrollPosition = 0;
        }
      }, 30); // 控制滚动速度
    },
    pauseScroll() {
      clearInterval(this.interval);
    },
    resumeScroll() {
      this.startScroll();
    },
    handleScroll(event) {
      // 根据滚轮方向调整 scrollPosition
      if (event.deltaY < 0) {
        this.scrollPosition = Math.max(this.scrollPosition - 10, 0); // 向上滚动
      } else {
        this.scrollPosition += 10; // 向下滚动
      }
    },