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

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

注：我的例子中，两个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事件中，同步滚动右边的tabletableLeft.addEventListener('scroll', function(e) {if (focus === 'left') {tableRight.scrollTop = tableLeft.scrollTop}})// 右边的table：mouseover事件中，记录下焦点tableRight.addEventListener('mouseover', function(e) {focus = 'right'})// 右边的table：scroll事件中，同步滚动左边的tabletableRight.addEventListener('scroll', function(e) {if (focus === 'right') {tableLeft.scrollTop = tableRight.scrollTop}})}

【完】