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

之前写代码有个需求：左侧是一个菜单，右边是内容，点击左侧菜单右边内容滚动到对应位置，右边内容滚动到某位置时，左侧菜单也会选中对应的菜单项。UI如下：这是大多网站的移动端都会有的需求。

解决方案一：

我们可以使用页面锚点的方式来操作，就是左边菜单使用然后右侧内容，每个模块使用id属性

如此也是可以实现页面滚动联动的。

解决方案二:

使用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获取DOM
						let rightItem = that.$refs.RightList.getElementsByClassName("list-item");
						let height = 0;
//将所有模块的高度获取到，后面点击时让右侧滚动到对应高度就行了。
						Array.from(rightItem).forEach(v => {
							height += v.clientHeight
							that.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;
						}
					}
				})
			}