之前寫代碼有個需求：左側是一個菜單，右邊是內容，點擊左側菜單右邊內容滾動到對應位置，右邊內容滾動到某位置時，左側菜單也會選中對應的菜單項。UI如下：這是大多網站的移動端都會有的需求。

解決方案一：

我們可以使用頁面錨點的方式來操作，就是左邊菜單使用<a href="#推薦1">然后右側內容，每個模塊使用id屬性<div id="推薦1">如此也是可以實現頁面滾動聯動的。

解決方案二:

使用js操作dom:(我這里使用vue框架)但js操作DOM原理都是相通的，相比也能看懂

async getList() {//從后端獲取數據let that = this;await api.axios({url: "/api/list/list"}).then((res) => {that.listData = res.list;that.listBanner = res.banner
//這里要在獲取到數據后再去拿DOM，不然高度是不準確的。setTimeout(function() {
//這里使用vue的ref獲取DOMlet rightItem = that.$refs.RightList.getElementsByClassName("list-item");let height = 0;
//將所有模塊的高度獲取到，后面點擊時讓右側滾動到對應高度就行了。Array.from(rightItem).forEach(v => {height += v.clientHeightthat.allHeight.push(height)})}, 200)})

leftChange(index) { //左側點擊let scrollMax = this.rightScroll.maxScrollY; //最大滾動區間
//這個判斷是因為我右側的內容數組第一個是寫死的，其他的和左側菜單都是后端返回的if (index === 0) {this.$refs.RightList.scrollTo({top: 0})} else {this.$refs.RightList.scrollTo({top: this.allHeight[index + 1]})}this.nowIndex = index;},ScrollChange(e){//右側滾動操作let top = this.$refs.RightList.scrollTop//console.log(top)this.allHeight.forEach((item,index,arr)=>{if(top >= arr[index]){
//這個判斷是因為我右側的內容數組第一個是寫死的，其他的和左側菜單都是后端返回的if(index===0){this.nowIndex = 0;}else{this.nowIndex = index-1;}}})}