vue实现左右两列竖直分别滑动，且双向关联的选项卡（一）

先完成‘左右两列竖直分别滑动，相互之间不存在任何关联’的页面样式：

<t emplate>

<div>

  <div class="flex-between all">

    <div class="left" id=‘left’>

      <span v-for="n in 16" :key="n">{{n}}</span>

    </div>

    <div class="right id=‘right’">

      <span v-for="m in 8" :key="m">{{m}}</span>

    </div>

  </div>

</div>

</template>

<style scoped>

.left, .right{

  overflow-y: auto;

  height: 667px;//高度是指滚动窗口的高度，必须有

}

.left{

   20%;

}

.right{

   80%;

}

.left span{

   background: forestgreen;

}

.right span{

   background: red;

   height: 300px;

}

</style>

在实际项目当中，这两部分不会单独存在，需要和上下的div（如header，footer）以及长屏幕适配，所以left, .right的高度需要被动态改变：

在mounted中：

let scrollHeight = $(window).height()-190              其中190是指header，footer等其他有.all之外的高度的固定值之和

            console.log(scrollHeight)

            document.getElementById("left").style.height= scrollHeight +"px";

            document.getElementById("right").style.height= scrollHeight +"px";