vue中監聽滾動條事件，通過事件控制其他div滾動，固定表頭和列

1.首先要有一個div出現滾動條，比如我想做的內容如下圖：

我的需求是（1）通過橫向滾動div4，控制2的橫向滾動，1和3固定不動（2）縱向滾動4，控制1和3的縱向滾動，2固定不動

布局方面不好講，代碼太多，此處省略，簡單的描述來說就是2和4需要滾動的內容寬度要一樣，既然需要滾動，那么里面的內容肯定是很長的。1，4, 3的內容高度一樣。因為4不管橫向滾動和縱向滾動，他的距離實際就是計算跟父元素最左邊或者最頂部的距離，得到這個距離去設置其他div的left或者top.

2.事件監聽

  destroyed () {
    window.removeEventListener('scroll', this.handleScroll, true)
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
  },

methods: {
  // 控制滾動條
  handleScroll (data) {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滾動條偏移量
    // 橫向滾動
    let scrollLeft = (this.$refs.scrollX).scrollLeft // scrollX為圖上div4
    let fixedHead = this.$refs.setScrollX // div2
    fixedHead.scrosllLeft = scrollLeft // 設置div2的scrosllLeft
    // 縱向滾動
    let scrollTop1 = (this.$refs.scrollX).scrollTop  // scrollX為圖上div4
    let fixedLeft1  = this.$refs.setScrollY1 // div1
    let fixedLeft2  = this.$refs.setScrollY2 // div3
    fixedLeft1.scrollTop = scrollTop1 // 設置div1的scrollTop
    fixedLeft2.scrollTop = scrollTop1 // 設置div2的scrollTop
  },
}