表同步滚动

public listenerScroll(): void {
  if (this.isListened) {
    return;
  }
  const e = document.querySelectorAll('.ant-table-body');
  const left = e[0];// 左侧tabledom
  const right = e[1];// 右侧tabledom
  if (left?.scrollHeight && left.clientHeight && right?.scrollHeight && right.clientHeight) {
    let isScrollLeft = true;// 只监听其中一个table,防止性能消耗
    left.addEventListener('mouseover', () => {
      isScrollLeft = false;
      left.addEventListener('scroll', () => {
        if (!isScrollLeft) {
          right.scrollTop = left.scrollTop;
          right.scrollLeft = left.scrollLeft;
        }
      });
    });
    right.addEventListener('mouseover', () => {
      isScrollLeft = true;
      right.addEventListener('scroll', () => {
        if (isScrollLeft) {
          left.scrollTop = right.scrollTop;
          left.scrollLeft = right.scrollLeft;
        }
      });
    });
  }
  this.isListened = true;
}

 

posted @ 2022-04-12 16:56  宇智波copy  阅读(32)  评论(0编辑  收藏  举报