美文网首页
ElementUI Table表格自动滚动

ElementUI Table表格自动滚动

作者: consolelog | 来源:发表于2023-02-13 15:47 被阅读0次
/**
 * 表格内筒自动滚动方法
 * 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;
    })();
  };
}

相关文章

网友评论

      本文标题:ElementUI Table表格自动滚动

      本文链接:https://www.haomeiwen.com/subject/dbtskdtx.html