elementui table 自动滚动 纯js实现

复制代码
startTableScroll() {
  // 获取表格滚动容器
  const tableWrapper = this.$refs.tableRef.$el.querySelector('.el-table__body-wrapper');
  if (tableWrapper) {
    this.scrollInterval = setInterval(() => {
      // 每次滚动 1 像素
      tableWrapper.scrollTop += 1;
      // 判断是否滚动到底部
      if (tableWrapper.scrollTop >= tableWrapper.scrollHeight - tableWrapper.clientHeight) {
        // 滚动到底部后重置滚动位置到顶部
        tableWrapper.scrollTop = 0;
      }
    }, 30); // 每 30 毫秒滚动一次
  }
},
stopTableScroll() {
  if (this.scrollInterval) {
    clearInterval(this.scrollInterval);
    this.scrollInterval = null;
  }
},
resetTableScroll() {
  // 重置表格滚动位置到顶部
  const tableWrapper = this.$refs.tableRef.$el.querySelector('.el-table__body-wrapper');
  if (tableWrapper) {
    tableWrapper.scrollTop = 0;
  }
}
复制代码
::v-deep.el-table__body-wrapper::-webkit-scrollbar {
  width: 0 !important;
}

::v-deep .el-table__body-wrapper {
  scrollbar-width: none;
  -ms-overflow-style: none;
}   去掉bar
相关推荐
超哥--19 小时前
B站视频内容智能分析系统(九):React 前端与管理面板
前端·react.js·前端框架
Cutecat_1 天前
视频字幕处理工具横向:提取模式 vs 编辑模式,该如何选择
android·前端·ios·语音识别
dsyyyyy11011 天前
JavaScript变量
开发语言·javascript·ecmascript
qq_422152571 天前
PDF 加水印工具怎么选?2026 年文档版权保护方案对比
前端·pdf·github
kyriewen1 天前
手写 Promise.all、race、any:不到 30 行代码,解决并发异步的所有姿势
前端·javascript·面试
brucelee1861 天前
OpenClaw 浏览器控制(Chrome MCP)完整教程
前端·chrome
ct9781 天前
React 状态管理方案深度对比
开发语言·前端·react
胡志辉的博客1 天前
深入浅出理解浏览器事件循环:从一道输出题讲到 Chrome 源码
前端·javascript·chrome·chromium·event loop
代码不加糖1 天前
js中不会冒泡的事件有哪些?
前端·javascript·vue.js
懂懂tty1 天前
Vue2与Vue3之间API差异
前端·javascript·vue.js