侧边导航栏有两个功能要实现：
1、选择任意一条页面滚动到指定目录位置
2、页面内容滚动侧边栏跟随一起滚动
页面结构部分，根据数据循环写一个ul > li，生成侧边目录
<ul><liv-for="(item, index) in menuArr":key="item.id":title="item.title":class="anchorIdx === index ? 'anchor_current' : '' "@click="chooseMenu(item, index)">{{item.title}}</li></ul>
解决第一个需求，点击任意一条目录页面滚动到对应内容
chooseMenu(item, index) {//保留当前点击的序列号，服务于选中样式this.anchorIdx = index//找到页面包裹每一章内容的节点数组let contentArr = document.getElementsByClassName('content')//根据点击的idx，找到对应章节，获得距离页面顶部的位置let num = contentArr[index].offsetTop//找到包裹内容页面的元素，即你的滚动条元素，如果是body，直接写windows就可以，不用找元素let view = document.getElementsByClassName('el-dialog__body')[0]//调用滚动方法view.scrollTo({ left: 0, top: num })}
解决第二个需求，页面滚动，目录跟着滚动
页面初始化的时候，给内容滚动的元素加一个侦听事件，定义一个变量 scroll 用来保存当前滚动的数值
const view = document.getElementsByClassName('el-dialog__body')[0]view.addEventListener('scroll', this.dataScroll)dataScroll() {this.scroll = document.getElementsByClassName('el-dialog__body')[0].scrollTop},
因为滚动要跟着一起变，所以要在 watch 里面实时监听scroll的变化，发生变化时，判断当前距离顶部最近的是第几章，得到index把侧边目录栏选中样式改为对应的即可实现
// 找到侧边栏所有元素let $navs = $('.anchor ul li')// 找到页面所有章节内容元素let contentArr = document.getElementsByClassName('content')for (let i = contentArr.length - 1; i >= 0; i--) {if (this.scroll >= contentArr[i].offsetTop - 100) {$navs.eq(i).addClass('current').siblings().removeClass('current ')break}}
