el-scrollbar仿锚点操作

项目中有这样的需求,但是此块是处于一个内层div中,外面还有一个滚动条,因此无法使用

this.$el.querySelector(`.div${val.index}`).scrollIntoView({

behavior: "smooth", // 平滑移动

});

如果使用上面代码也可以进行锚点跳转,但是会直接顶到顶部,实际要求两滚动条互不影响,即点击左侧菜单,右边滚动条跳转指定位置,且最外层滚动条不动,于是使用

<el-scrollbar style="height:500px;overflow-x:hidden" ref="scroll">
 // 用css设置一下div的高度和class便于下面获取对应的div
    <div v-for="(item,index) in 7" :key="index" :class="`div${index}`"></div>
</el-scrollbar>

mounted() {
    // 监听区域页面滚动事件
    this.$nextTick(() => {
      document
        .querySelector(".内层滚动区域的id或者class")
        .addEventListener("scroll", this.scrolling, true);
    });
  },

methods:{
    //导航菜单的点击事件,上面代码没有写出来,可以自己根据项目自行定义
    handleTabClick(val) {
      // 此代码也可以跳转,但是会直接定到顶部
      //   this.$el.querySelector(`.div${val.index}`).scrollIntoView({
      //     behavior: "smooth", // 平滑移动
      //   });
     
      //点击菜单获取到右边对应的div的class
      var el = this.$el.querySelector(`.div${val.index}`);    
     //el.offsetTop即距离区域顶部的位置,设置一下就可以达到效果     
      this.$refs["scroll"].wrap.scrollTop = el.offsetTop;   
    },
}