电梯导航----基础版本

<template>
  <a-modal
   :maskClosable="false"
   title='导航对应模块内容滚动变化'
   v-model="visible"
   :width="950"
   :footer="null">
 
    <div class="wrapper">
      <div class="left_content">
        <p  v-for="(item,index) in list" :key='index' :class="{'active':isActive==index}"  @click="scrollIndex(index,item.id)">{{item.title}}</p>   
     
      </div>
      <div class="right_content" id="right_content">
        <div id="block1">1</div>
        <div id="block2">2</div>
        <div id="block3">3</div>
      </div>
    
	  </div>


   
  </a-modal>
</template>
 

<script>

export default {
 

 data() {
   return {
     visible: false,
     list: [{
            id: 'block1',
            title: '模块1'
          },
          {
            id: 'block2',
            title: '模块2'
          },
          {
            id: 'block3',
            title: '模块3'
          },
        ],
        isActive: null,
        block_one: '',
        block_two: '',
        block_three: '',
        bodyHeight: 0,
        tar: null,

  };
  },
  watch: {
      bodyHeight: {
        handler(newVal) {
          if (newVal >= this.block_one) {
            this.isActive = 0
          }
          if (newVal >= this.block_two) {
            this.isActive = 1
          }
          if (newVal >= this.block_three) {
            this.isActive = 2
          }
          if (newVal >= this.block_four) {
            this.isActive = 3
          }
          if (newVal == 0) {
            this.isActive = 0
          }
        },
        immediate: true,
        deep: true
      }
    },

 

methods: {
  // ---打开弹框
  showModal () {
    this.visible = true
  this.$nextTick(()=>{
    this.open()
  })
  
  },
  // ---关闭弹框
  handleOk () {
    this.visible = false
  },

  scrollIndex(val, id) {
	        this.isActive = val
	        this.$nextTick(() => {
	          let targetbox = document.getElementById(id)
	          let height = targetbox.offsetTop
	          this.tar.scrollTop = height
	        })
	    },
      ccroll() {
        console.log('滚动中',this.tar.scrollTop);
        	this.bodyHeight =  this.tar.scrollTop 
          this.open()
       
      	},
    open(){
    this.tar = document.getElementById('right_content')
    this.tar.addEventListener("scroll", this.ccroll);
   		//先获取右侧内容区域每个模块的高度
		this.block_one = document.getElementById('block1').offsetTop
 		this.block_two = document.getElementById('block2').offsetTop
 		this.block_three = document.getElementById('block3').offsetTop
  
 		
   },


},
};
</script>
<style scoped lang="less">
.right_content{
  position:relative;
  height:200px;
  overflow:auto;
}
.wrapper{

  display:flex;
  .left_content{
    width:90px;
  }
  .right_content{
    width: calc(100% - 100px);
  }
}

.active {
	    color: orange;
	  }
    .right_content{
      div{
        height:300px;
        border:1px solid red;
        margin-top:20px;
        width:100%;
      }
    }
</style>

在父组件引用一下  ==列如