先完成‘左右兩列豎直分別滑動，相互之間不存在任何關聯’的頁面樣式：
<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";