スクロール同期をlodashでスロットルする。
スロットルとは、絶え間なく実行される処理にインターバルを作ること。
import _ from 'lodash'
@Component({})
export default class TableWraper extends Vue {
mounted () {
const rh = document.querySelector('.table.right.header')
const lh = document.querySelector('.table.left.header')
const rb = document.querySelector('.table.right.body')
const lb = document.querySelector('.table.left.body')
rh!.addEventListener('scroll', _.throttle(() => rb!.scroll(rh!.scrollLeft, rb!.scrollTop), 100))
rb!.addEventListener('scroll', _.throttle(() => rh!.scroll(rb!.scrollLeft, rh!.scrollTop), 100))
rb!.addEventListener('scroll', _.throttle(() => lb!.scroll(lb!.scrollLeft, rb!.scrollTop), 100))
lb!.addEventListener('scroll', _.throttle(() => rb!.scroll(rb!.scrollLeft, lb!.scrollTop), 100))
}
}