vue项目中实现监听滚动条滚动事件并滚动到固定位置

需求场景

项目结构：vue node.js webpack
滚动条滚动到某处的时候 tab就切换成当前位置的值并且点击tab还能滚动到想要的位置，大概就是锚点跳转的意思。

直接上代码

这里必须是mounted下的，因为方法是要操作dom的，mounted就是挂载完dom树后执行的钩子
mounted() {
window.addEventListener(‘scroll’, this.handleScrollBf, true); // 监听（绑定）滚轮滚动事件

   },
   //这里必须要移除掉这个window添加的监听事件，要不然在别的界面也会出发滚动监听 
     destroyed: function () {
        window.removeEventListener('scroll', this.handleScroll, true);   //  离开页面清除（移除）滚轮滚动事件
    },
   methoods:{
      //滚动事件
        handleScroll: function () {
            let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
            // 设备/屏幕高度
            let scrollObj = document.getElementsByClassName('content')[0]; // 滚动区域
            let scrollTop = scrollObj.scrollTop; // div 到头部的距离
            //这里就可以做事情拉  比如
            let baseInfo = document.getElementById('baseInfo').offsetTop;
             if(scrollTop>0&&scrollTop<baseInfo ){
                this.activeName = 'baseInfo'
            }
            //上面是实现当滚动距离大于0并且小于id是baseInfo 到头顶的距离时候  设置 this.activeName = 'baseInfo'  然后下面就可以随意拓展了
      
        },

//tab切换 然后这个就是点击该tab栏去跳转到固定位置的方法
handleClick(){
let scrollObj = document.getElementsByClassName(‘content’)[0]; // 滚动区域
let activeObjTop = document.getElementById(this.activeName).offsetTop;

            scrollObj.scrollTo(0,activeObjTop)


        },
   }

THE LAST

描述虽少，但实现了这个需求了，有发现写错的地方望大佬指出，小弟不胜感激
上两张效果图