vue+elementUI的tabs与table表格联动固定与滚动位置

有个变态的需求，要求tabs左侧固定，右侧是表格，点击左侧tab，右侧表格滚动到指定位置，同时，右侧滚动的时候，左侧tab高亮相应的item

上图

右侧的高度非常高，内容非常多

常规的瞄点不适用，因为右侧只有一个div(table表格)

目前采用的是监听滚动，但是也有问题，不同的浏览器，屏幕的高度是不一样的，也有适配问题

上代码

 

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

// method
scroll (e) {
        const scrollTop = [298, 730, 766, 1162, 1702, 2098, 2242, 2638, 2854, 3711]
        console.log(window.scrollY)
      	// 获取元素对屏幕上边的距离
        if(this.$refs.tabsRef && this.$refs.tabsRef.$el){
          if(window.scrollY > 100){
            this.$refs.tabsRef.$el.style.paddingTop = window.scrollY - 180 + `px`
          }else{
            this.$refs.tabsRef.$el.style.paddingTop = window.scrollY + `px`
          }
        }
        for(let i=0; i<9; i++){
          this.$refs['tabPaneRef' + i].style.color = "#303133"
        }
        for(let i=0; i<9; i++){
          if(window.scrollY <= scrollTop[0]){
            this.$refs['tabPaneRef' + 0].style.color = "#13C2C2"
            document.getElementsByClassName("el-tabs__active-bar")[0].style.transform = "translateY(0px)";
            break;
          }else if(window.scrollY > scrollTop[8]){
            this.$refs['tabPaneRef' + 8].style.color = "#13C2C2"
            document.getElementsByClassName("el-tabs__active-bar")[0].style.transform = "translateY(320px)";
            break;
          }else if(scrollTop[i] <= window.scrollY && window.scrollY < scrollTop[i+1]){
            this.$refs['tabPaneRef' + i].style.color = "#13C2C2"
            document.getElementsByClassName("el-tabs__active-bar")[0].style.transform = "translateY(" +  i * 40 + "px)";
            break;
          }
        }
      },
      scrollToBottom(e){
        if(this.dataSource.length){
          const { tabs } = this.getFormMap(formKayMap) || { tabs: [] };
          let index = 0;
          tabs.forEach((element, i) => {
            if(element.tab === e.target.outerText){
              index = i;
            }
          });
          const scrolls = [0, 12, 13, 24, 39, 50, 54, 65, 71]
          document.getElementsByClassName("el-table__row")[scrolls[index]].scrollIntoView();
        }
      },

// element

    render() {
      const { tabs } = this.getFormMap(formKayMap) || { tabs: [] };
      return (
        

          

            {this.formArr.map((form, idx) => {
              return (
                

                  
                    {idx == 0 ? "当前所选" : `目标${idx}`}
                    
                      
                        {this.formArr.length > 2 && idx !=0 && (
                          
                        )}
                      
                    
                  
                
              );
            })}
            

              
                新增对比条件
              
              
                开始对比
              
              
                导出对比数据
              
            
          
          

            
              {tabs.map((item, index) => {
                return (
                  
                    
                  
                )
              })}
            
            
              {this.column.map(item => {
                return (
                   {
                        return (
                          
                            {item.prop == "tip" ? {row[item.prop]} : row[item.prop]}
                          
                        );
                      }
                    }}
                  />
                );
              })}
            
          
        
      );
    }