如何让页面中的两个元素同步滚动

注：我的例子中，两个table中的行数相同（即，滚动条长度相同）。

  mounted() {
    const tables = document.querySelectorAll('table')

    // 得到左边的table元素
    const tableLeft = tables[0]
    // 得到右边的table元素
    const tableRight = tables[1]

    let focus = 'left'

    // 左边的table：mouseover事件中，记录下焦点
    tableLeft.addEventListener('mouseover', function(e) {
      focus = 'left'
    })
    // 左边的table：scroll事件中，同步滚动右边的table
    tableLeft.addEventListener('scroll', function(e) {
      if (focus === 'left') {
        tableRight.scrollTop = tableLeft.scrollTop
      }
    })

    // 右边的table：mouseover事件中，记录下焦点
    tableRight.addEventListener('mouseover', function(e) {
      focus = 'right'
    })
    // 右边的table：scroll事件中，同步滚动左边的table
    tableRight.addEventListener('scroll', function(e) {
      if (focus === 'right') {
        tableLeft.scrollTop = tableRight.scrollTop
      }
    })
  }

【完】