vue 设置元素上下双滚动条

在一个项目中需求不让有右侧有滚动条，考虑表过长需要table头部和底部都要有滚动条，如下图：

也是奇葩需求，话不多说做都做了记录一下吧，万一能帮助同行小伙伴嘞！
下边滚动条还是table的滚动条没动，我只给上面加了一个滚动条。

HTML 保持与table滚动条一致，默认给了一个1像素高度（不然看不到）

项目用的是 antd 框架，其他框架自个想办法获取宽度给下面代码保持一致。

<div class="scrollbar" ref="scrollBar">
    <div :style="{ width: th_index * 170 +'px', height: 1+'px' }"></div>
</div>

JS

data() {
    return {
        scrollData: 0, // 滚动条距离
        scrollType: true, // 滚动条类型 true 上 false 下
    }
},
watch:{
    // 监听滚动条
    scrollData(res){
        if(res){
            this.scrollAll()
        }
    }
},
mounted() {
	// 监听拖动滚动条（有的可能需要通过定时器等待dom加载完）
    this.$nextTick(() => {
    	this.$refs.scrollBar.addEventListener('scroll', this.scroll_Top)
    	// 由于采用的是UI框架ref不好拿带滚动条元素，这里直接通过类名获取的。
        document.getElementsByClassName('ant-table-body')[0].addEventListener('scroll', this.scroll_Bottom)
    })
},
methods: {
	// 上部滚动条
    scroll_Top(){
        this.scrollType = true // true 为上滚动条
        this.scrollData = this.$refs.scrollBar.scrollLeft
    },

    // 下部滚动条
    scroll_Bottom(){
        this.scrollType = false // false 为下滚动条
        // 由于采用的是UI框架ref不好拿带滚动条元素，这里直接通过类名获取的。
        this.scrollData = document.getElementsByClassName('ant-table-body')[0].scrollLeft
    },

	// 滚动条赋值
    scrollAll() {
        // 给获取到的相反元素设置滚动条位置，使达到拖上面下面跟着滚动，拖下面上面跟着滚动。
        if(!this.scrollType){
            this.$refs.scrollBar.scrollLeft = this.scrollData
        }else{
        	// 由于采用的是UI框架ref不好拿带滚动条元素，这里直接通过类名获取的。
            document.getElementsByClassName('ant-table-body')[0].scrollLeft = this.scrollData
        }
    },
},
beforeDestroy() {
	// 注销监听
    window.removeEventListener('scroll', this.scroll_Top)
    window.removeEventListener('scroll', this.scroll_Bottom)
    window.removeEventListener('scroll', this.scrollAll)
}

CSS

// 有个最大高度17刚好是滚动条高度
.scrollbar{overflow: auto;max-height:17px;background: transparent;}