html自动滚动,vue自动滚动,各种方案方案代码大全,保证能用

首先介绍第三方vue的

<script setup>
import { vue3ScrollSeamless } from "vue3-scroll-seamless";
import { ref } from "vue";
import faker from 'faker'; // 引入Faker.js


// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
const tableContainer = ref(null);
const tableContainer2 = ref(null);
// var visibleRows: []; // 可见的行数据
const currentRowIndex = ref(0);// 当前滚动的行索引
// const tableData = ref(null);
const tableData = ref([]);
const rowHeight = ref(30);// 设置每行的高度，根据需要自行调整
const list = ref([{
  'title': '水调歌头·明月几时有',
}, {
  'title': '苏轼 〔宋代〕',
}, {
  'title': '明月几时有？把酒问青天。',
}, {
  'title': '不知天上宫阙，今夕是何年。',
}, {
  'title': '我欲乘风归去，又恐琼楼玉宇，高处不胜寒',
}, {
  'title': '起舞弄清影，何似在人间。',
}, {
  'title': '转朱阁，低绮户，照无眠。',
}, {
  'title': '不应有恨，何事长向别时圆？',
}, {
  'title': '人有悲欢离合，月有阴晴圆缺，此事古难全。',
}, {
  'title': '但愿人长久，千里共婵娟。',
}
])
const classOptions = {
  limitMoveNum: 6,
};
function autoScrollTable() {
  tableContainer.value.scrollTop = 0; // 滚动到顶部，保证每次从第一行开始滚动

  // 设置定时器，每隔一段时间执行一次滚动
  setInterval(() => {
    currentRowIndex.value+=1;
    if (currentRowIndex.value >= tableData.value.length) {
      currentRowIndex.value = 0; // 如果滚动到底部，回到第一行
      console.info("first row");
    }
    console.info("current:"+currentRowIndex.value);
    scrollTableRow();
  }, 1000); // 设置滚动时间间隔，单位为毫秒（此处为3秒，根据需要调整）
}

function generateTableData() {
  // 模拟10行5列的表格数据
  for (let i = 1; i <= 10; i++) {
    // let rowData = [];
    const newData = {
      id: Date.now(),
      content: 'New Data ' + i,
    };
    /*        for (let j = 1; j <= 5; j++) {
   
             rowData.push(`行${i}-列${j}`);
           } */
    tableData.value.push(newData);
  }
}
function scrollTableRow() {

  const container1 = tableContainer.value;
  container1.scrollTop = currentRowIndex.value * rowHeight.value;
  console.log("tableContainer.scrollTop:"+container1.scrollTop);
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
  generateTableData();
  autoScrollTable();
  // alert("ffff")
})

这方法不靠谱
https://xiaofulzm.github.io/vue3-scroll-seamless/guide/usage.html#%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C

上面的无法处理表格，因为我发现他这个放到表格里面多套了 一层div,

需要修改display:contents才行，但是此框架做了一些处理，我改了也没用
，不过还有一种方法就是弄2个表，

下面是另外一种方案，基于修改 table 的top实现，

<template>
    <div class="table-container">
      <table class="tbl-body" :style="{ top: tblTop + 'px' }">
        <tbody>
          <tr v-for="item in data" :key="item.id">
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        data: [
          { id: 1, name: 'John', age: 30 },
          { id: 2, name: 'Alfffice', age: 25 },
          { id: 3, name: 'Bob', age: 35 },
          { id: 3, name: 'Bob', age: 35 },
          { id: 3, name: 'Bobfff', age: 35 },
          { id: 3, name: 'Bob', age: 35 },
          { id: 3, name: 'Bob', age: 35 },
          { id: 3, name: 'Bob', age: 35 },
          { id: 3, name: 'Bob', age: 35 },
          { id: 3, name: 'Bob333', age: 35 },
          { id: 3, name: 'Bob333', age: 35 },
          { id: 3, name: 'Bob333', age: 35 },
          { id: 3, name: 'Bob333', age: 35 },
          { id: 3, name: 'Bob333', age: 35 },
          // Add more data objects as needed
        ],
        tblTop: 0,
        outerHeight: 0,
        speedhq: 10,
        myMarhq: null
      };
    },
    mounted() {
      this.outerHeight = this.$el.querySelector('.tbl-body tbody tr').offsetHeight;
      this.myMarhq = setInterval(this.Marqueehq, this.speedhq);
    },
    methods: {
      Marqueehq() {
        console.log(this.tblTop);
        if (this.tblTop <= -this.outerHeight * this.data.length) {
          this.tblTop = 0;
        } else {
          this.tblTop -= 1;
        }
      }
    },
    beforeDestroy() {
      clearInterval(this.myMarhq);
    }
  };
  </script>
  
  <style>
  .table-container {
    overflow: hidden;
    height: 200px; /* Set the desired table height */
    position: relative;
  }
  
  .tbl-body {
    position: absolute;
    top: 0;
  }
  </style>

vu3 包含鼠标覆盖停止和启动