ElementUI Table表格自动滚动

/**
 * 表格内筒自动滚动方法
 * 2022年7月7日 17:15:13
 * @param {Object} table el-table的ref对象
 * @param {Number} speed 表格滚动速度
 */

export function tableScroll(table, speed = 30) {
  // 拿到表格中承载数据的div元素
  const divData = table.bodyWrapper;

  let timer;

  const startScroll = () => {
    // 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素)
    clearInterval(timer);
    timer = setInterval(() => {
      // 元素自增距离顶部1像素
      divData.scrollTop += 1;
      // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
      if (divData.clientHeight + divData.scrollTop + 1 > divData.scrollHeight) {
        // 重置table距离顶部距离
        divData.scrollTop = 0;
      }
    }, speed);
  };

  startScroll();

  //鼠标移入
  divData.onmouseover = () => {
    clearInterval(timer);
  };

  //鼠标移出
  divData.onmouseout = () => {
    clearInterval(timer);
    startScroll();
  };

  //窗口发生改变
  window.onresize = () => {
    return (() => {
      window.screenHeight = document.body.clientHeight;
      document.clientHeight = window.screenHeight;
    })();
  };
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容