table同步滚动

同步滚动两table

  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;
  }