1.需求：点击左侧导航，右侧内容定位到指定位置。右侧数据内容滚动，左侧导航对应定位颜色。同时左侧导航复选框选中时，右侧内容位置对应选中。

部分代码通过百度网上查到，抄抄改改。
2.实现思路：左侧用 ul li 实现导航效果，从左侧导航到右侧内容定位可以用锚点方式。我这边左侧用 click点击事件，

<div style="width:100%;height:500px;overflow:auto">
<div class="left-menu">
          <ul ref="ul" id="uu">
              <li><a  @click="changeHash('#a',0)">基本信息</a></li>
              <li><a  @click="changeHash('#b',1)">适用用户</a></li>
              <li><a  @click="changeHash('#c',2)">判定条件</a></li>
              <li><a  @click="changeHash('#d',3)"><el-checkbox v-model="windows"></el-checkbox>&nbsp;Windows</a></li>
              <li><a  @click="changeHash('#e',4)"><el-checkbox v-model="MacOS"></el-checkbox>&nbsp;MacOS</a></li>
              <li><a  @click="changeHash('#f',5)"><el-checkbox v-model="IOS"></el-checkbox>&nbsp;IOS</a></li>
              <li><a  @click="changeHash('#i',5)"><el-checkbox v-model="Android"></el-checkbox>&nbsp;Android</a></li>
              <li><a  @click="changeHash('#g',6)"><el-checkbox v-model="gray"></el-checkbox>&nbsp;灰度处置</a></li>
              <li><a  @click="changeHash('#h',7)">处置动作</a></li>
          </ul>
        </div>
  <!-- 接下面部分html内容 -->

changeHash(val,index){
          document.querySelector(val).scrollIntoView(true);
          }

而右侧内容部分，每个导航菜单对应的div都设置上对应的id

 <div class="right-content" id="content-list">
          <el-form :model="form" label-position="right" label-width="110px">
            <div class="classify-item" id="a" style="height:auto;width:100%;">
            内容部分
            </div>
            <div class="classify-item" id="b" style="height:auto;width:100%;">
            内容部分
            </div>
            <div class="classify-item" id="c" style="height:auto;width:100%;">
            内容部分
            </div>
            </el-form>
  </div> 
  </div>

而我这边是在弹框中显示，所以在打开弹框操作中查询到ul li 对象内容以及右侧数据内容不分的高度

addFormBtn(){
          this.onlineVisible = true;
          this.$nextTick(()=>{
            let li = document.querySelectorAll('#uu>li')
            let contentList = document.getElementById('content-list');
            let contentHeightList = document.querySelectorAll('#content-list>form>div');
            let height = 0;
            this.heightList.push(height);
            contentHeightList.forEach(item =>{
              height += item.clientHeight;
              this.heightList.push(height);
            })
            
            contentList.addEventListener('scroll',(pos)=>{
              this.scrollY = Math.abs(Math.round(contentList.scrollTop))
              for(let i = 0;i<li.length;i++){
                if(i == this.currentIndex){
                  li[i].className  = "li-color" ;
                }else {
                  li[i].className  = "" ;
                }
              }
              // console.log(this.currentIndex,this.heightList)
            })
          })
        },

当前的位置通过对比已存的高度位置跟滚动的高度来确定

computed:{
      currentIndex(){
        const index = this.heightList.findIndex((item,index) =>{
          return this.scrollY >= this.heightList[index] && this.scrollY < this.heightList[index+1]
        })
        return index > 0 ? index : 0
      }
    },

以及部分css样式

.left-menu {
  width:20%;
  height: 100%;
  overflow: scroll;
  display: block;
  float: left;
}
.right-content {
  width:80%;
  height: 100%;
  overflow: scroll;
  display: block;
}
.left-menu ul {
  list-style-type: none;
  padding-inline-start:0;
}
.left-menu ul li {
  margin: 14px 5px;
  font-size: 1.2rem;
  font-weight: 600;
  text-align: left;
  
}
.left-menu ul li.current {
  color:blue;
}
.left-menu ul li:focus,.left-menu ul li:active {
  color: dodgerblue;
}
.li-color {
  color: #1E90FF;
}
.classify-item {
  background: #fff;
}

最后重点最外层需要一个固定得高度，然后超出内容为auto，不然没外层父元素固定高度，内层内容没有临界滚动高度。当内层数据高度小于等于外层高度时，数据不滚动。当内层数据高度大于外层div高度时，数据内容出现滚动。

出现坑的地方：当最后一个导航菜单对应的右侧数据内容高度小于最外层高度时，我这边设置是500px 。左侧导航菜单没办法颜色定位选中到最后一个，而是在倒数第二个。