Vue项目滚轴盒子显示内容的位置问题

1、移动端：两个滚动盒子显示内容联动

 <div id="app">
   <div class="flexBox" style="width:270px;">
     <div style="width: 100px;">
       <div class="flexBox">
         <div>
           排名
         </div>
         <div>
           姓名
         </div>
       </div>
       <div id="leftbox" ref="leftbox" style="height:100px;outline: 1px solid red;overflow-y: scroll;" @touchmove="fn($refs.leftbox,$refs.rightbox)" @touchend="fend($refs.leftbox,$refs.rightbox)">
         <div>
           <div v-for="(item,index) in data" :key="index" class="flexBox">
             <div>{{item.id}}</div>
             <div>{{item.name}}</div>
           </div>
         </div>
       </div>
     </div>
     <div style="width: 150px;overflow-x: scroll;outline: 1px solid orangered;">
       <div style="width: 300px;">
         <div class="flexBox">
           <div>
             性别
           </div>
           <div>
             籍贯
           </div>
           <div>
             工作地
           </div>
           <div>
             工作地点
           </div>
         </div>
         <div id="rightbox" ref="rightbox" style="height:100px;outline: 1px solid blue;overflow-y: scroll;" @touchmove="fn($refs.rightbox,$refs.leftbox)" @touchend="fend($refs.rightbox,$refs.leftbox)">
           <div>
             <div v-for="(item,index) in data" :key="index" class="flexBox">
               <div>{{item.XB}}</div>
               <div>{{item.JG}}</div>
               <div>{{item.SZD}}</div>
               <div>{{item.GZDD}}</div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>

div {
  text-align: center;
}

.flexBox {
  display: flex;
  justify-content: space-between;
}

new Vue({
  el: "#app",
  data() {
    return {
      data: [
        {
          name: "******1",
          id: 1,
          XB: "男",
          JG: "安徽1",
          SZD: "上海",
          GZDD: "陆家嘴"
        },
        {
          name: "******2",
          id: 2,
          XB: "男",
          JG: "安徽2",
          SZD: "上海",
          GZDD: "陆家嘴"
        },
        {
          name: "******3",
          id: 3,
          XB: "男",
          JG: "安徽3",
          SZD: "上海",
          GZDD: "陆家嘴"
        },
        {
          name: "******4",
          id: 4,
          XB: "男",
          JG: "安徽4",
          SZD: "上海",
          GZDD: "陆家嘴"
        },
        {
          name: "******5",
          id: 5,
          XB: "男",
          JG: "安徽5",
          SZD: "上海",
          GZDD: "陆家嘴"
        },
        {
          name: "******6",
          id: 6,
          XB: "男",
          JG: "安徽6",
          SZD: "上海",
          GZDD: "陆家嘴"
        },
        {
          name: "******7",
          id: 7,
          XB: "男",
          JG: "安徽7",
          SZD: "上海",
          GZDD: "陆家嘴"
        },
        {
          name: "******8",
          id: 8,
          XB: "男",
          JG: "安徽8",
          SZD: "上海",
          GZDD: "陆家嘴"
        },
        {
          name: "******9",
          id: 9,
          XB: "男",
          JG: "安徽9",
          SZD: "上海",
          GZDD: "陆家嘴"
        },
        {
          name: "******10",
          id: 10,
          XB: "男",
          JG: "安徽10",
          SZD: "上海",
          GZDD: "陆家嘴"
        },
        {
          name: "******11",
          id: 11,
          XB: "男",
          JG: "安徽11",
          SZD: "上海",
          GZDD: "陆家嘴"
        },
        {
          name: "******12",
          id: 12,
          XB: "男",
          JG: "安徽12",
          SZD: "上海",
          GZDD: "陆家嘴"
        },
        {
          name: "******13",
          id: 13,
          XB: "男",
          JG: "安徽13",
          SZD: "上海",
          GZDD: "陆家嘴"
        }
      ]
    };
  },
  methods: {
    fend(currBox, otherBox) {
      setTimeout(() => {
        otherBox.scrollTop = currBox.scrollTop;
      }, 400);
    },
    fn(currBox, otherBox) {
      otherBox.scrollTop = currBox.scrollTop;
    }
  }
});

2、移动端：tab切换时，每项内容展示的位置保持不变

<div id="app">
  <ul class="tab">
    <li class="tab-item" @click="tabClick(0)">tab1</li>
    <li class="tab-item" @click="tabClick(1)">tab2</li>
    <li class="tab-item" @click="tabClick(2)">tab3</li>
  </ul>
  <div class="">
      <!-- <keep-alive></keep-alive> -->
      <div v-show="activeIndex === 0" class="tab-content">
        <div v-for="i in all">tab1-{{i}}</div>
      </div>
      <div v-show="activeIndex === 1" class="tab-content">
        <div v-for="i in all">tab2-{{i}}</div>
      </div>
      <div v-show="activeIndex === 2" class="tab-content">
        <div v-for="i in all">tab3-{{i}}</div>
      </div>
    </div>
  </div>
</div>

.tab li{
  text-decoration: none;
  list-style: none;
  float: left;
  width: 30%;
  background: red;
  margin: 10px;
}
.tab-content {
  overflow: auto;
  height: 400px;
  width: 100%;
}

new Vue({
  el: '#app',
  data: {
    activeIndex: 0,
    all: 50
  },
   methods: {
     tabClick(index) {
       this.activeIndex = index
     }
   }
})

**注：**1、以上是利用v-show控制显示，不销毁dom，从而保持位置，缺点是代码比较多，也可以利用Vue提供的keep-alive组件，可以缓存内容
2、对于滚动盒子tab切换数据时，内容回到顶部，可以利用v-if来的话，缺点代码多，开销大，如果利用重设带有滚轴盒子的scrollTop属性为0,也可以回到顶部