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
相关推荐
hunterandroid4 分钟前
自定义 View 绘制与触摸冲突:从滑动卡顿到事件分发闭环
android·前端
vancece7 分钟前
JS实现堆 & 215.数组中的第K个最大元素
java·前端·javascript
lichenyang45328 分钟前
NestJS + Socket.IO 鉴权、用户房间与幂等邀请
前端·后端
paopaokaka_luck29 分钟前
基于springboot3+vue3+uniapp的剧本杀预约小程序(AI角色对话、协同过滤算法、地图Api、Echarts图形化分析)
java·前端·spring boot·学习·echarts
lichenyang45329 分钟前
React 实时通知与异步竞态处理
前端·后端
三十而立洋35 分钟前
搭建现代化 Git 提交规范:commitlint + czg + husky + lint‑staged 完整实战
前端
半个落月37 分钟前
React + Vite Todo 实践:用 Axios 与 Mock 解开前后端等待
前端
qq_3168377538 分钟前
uniapp 安卓/H5 使用 contentEditable 属性 富文本编辑器
android·javascript·uni-app
yuqifang39 分钟前
var deferred = jQuery.Deferred(); 使用示例
前端·javascript·面试
阳火锅39 分钟前
领导夸我日报越写越详细了,其实我只敲了 npm run commit
前端·javascript·人工智能