菜单和内容滚动的联动原理及代码

之前写代码有个需求：左侧是一个菜单，右边是内容，点击左侧菜单右边内容滚动到对应位置，右边内容滚动到某位置时，左侧菜单也会选中对应的菜单项。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;}}})}