自定义表格 处理滚动body时，header同步滚动

项目中一个模块的表格，element table满足不了，就自己写了一个，记录一下
当滚动table body时，需要table header与右侧悬浮的table column同时上下/左右滚动，使用transform中的translate

autoScroll () {
  let header = document.querySelector('.cycle-header')
  let body = document.querySelector('.cycle-body')
  let right = document.querySelector('.cycle-list')

  if (!header || !body) return

  body.onscroll = () => {
    const scrollLeft = body.scrollLeft;
    const scrollTop = body.scrollTop;
    const offsetWidth = body.offsetWidth;

    header.style.transform = `translateX(-${scrollLeft}px)`;
    right.style.transform = `translateY(-${scrollTop}px)`;
  }
}

备注：关于header与悬浮列的滚动，例如cycleHeader为表头组件，但跟随body滚动时，组件会滚动出table，如下图

解决办法为使用一个div将header包含，然后设置这个parent div为overflow: hidden即可