浮动左右滚动条

1.效果图介绍

观察图1和图2，可以发现，无论滚动条1滑动到哪里，只要鼠标hover于表格之上标注1和 标注2总是位于表格的垂直方向中间。
图一：
图2：

2.实现代码

备注：此处使用vue框架，下面注释请细品，不是快餐式复制粘贴就可以直接使用
1.template模板

// 下面html <i>是图中的标注1和标注2，我们只需要关注--> :style="{ top: tableData.scrollTop }",通过改变样式style的top的值改变使其位置垂直方向中间
<div> //滚动条1滑动区域
	<div style="position:relative" @mouseover="getScrollPosition(`id1`, tableData)" id="id1"> //id动态绑定，它用于计算top的关键要素          整体表格1
		<div class="el-table" > //表格
				xxxx内容。表格
		</div>
		<div style="position:absolute"> //悬浮在表格上的标注1和标注2，即 << 和 >>
		   <i class="el-icon-d-arrow-left" title="向左滚动" @click="scrollLeft" :style="{ top: tableData.scrollTop }"></i>
		   <i class="el-icon-d-arrow-right" title="向右滚动" @click="scrollRight" :style="{ top: tableData.scrollTop }"></i>
		</div>
	</div>
	<div id="id2"></div> //整体表格2，等同于整体表格1
	<div id="id3"></div> //整体表格3，等同于整体表格1
	//...无数整体表格n
</div>

2.script模板
图3：

  methods: {
    getScrollPosition(id,tableData){
    //下面代码都是在计算  标注1 和 标注2 (即<< 和 >>)的style  top
      let Prect = document.querySelector('视图容器ID或者class,如图3中的可见视图').getBoundingClientRect()
      let Dtable = document.querySelector('#'+id+' .el-table')
      
      if(!Dtable){
        return
      }
      // Drect 是template模板中  整体表格1或整体表格2或整体表格n
      let Drect = Dtable.getBoundingClientRect()
      //代码解析：Prect.top和Drect.top指的在浏览器page中的top，Prect包裹了无数个Drect，当前的Drect是通过id获取
      let top = Math.max(Prect.top,Drect.top)  // 判断Drect的最顶部是否高于Prect最顶部，数值越小越高
      let bottom = Math.min(Prect.bottom,Drect.bottom) // 判断Drect的最底部是否高于Prect最底部，数值越小越高
      //(bottom - top)/2便是中间位置，但还需要加上被Prect遮住的部分gap ，因为我们使用相对位置position:relative

      let gap = Prect.top-Drect.top
      this.$set(tableData,'scrollTop',(gap > 0 ? (bottom - top)/2 + gap : (bottom - top)/2 ) + 'px')
    },
 }

小弟不才，如有写得不太清楚的请留言指正