先完成‘左右两列竖直分别滑动，相互之间不存在任何关联’的页面样式：
<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{
width: 20%;
}
.right{
width: 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";