a minute ago

JavaScriptでスクロール同期した時、マウススクロール速度が遅くなる


解決方法

スクロール同期を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))
  }
}

Related Articles