vue锚点，滚动高亮导航

需求：锚点功能，点击导航滚动到可视区域。滚动内容区域，也可以高亮导航

导航部分html

    {{ item.name }} 

内容区域html

 

      

          

                 
{{ item.name }} 
           
       
 

 data定义：

      scrollLock: false, //点击锚点锁定，不触发滚动内容对导航的影响

 方法：

  scrollFn: debounce(function (e) {
      this.scrollMenuItems(e);
    }, 30),
    scrollMenuItems(e) {
      const scrollItems = document.querySelectorAll('.tool-module');
      if (this.timer) {
        clearTimeout(this.timer);
      }
      if (this.scrollLock) {
        this.timer = setTimeout(() => {
          this.scrollLock = false;
        }, 35);
        return;
      }
      for (let i = this.toolsList.length - 1; i >= 0; i--) {
        const judge = this.$refs.scrollWrap.scrollTop >= scrollItems[i].offsetTop - 136;
        if (judge) {
          this.activeName = `all-${i}`;
          break;
        }
      }
    },

    goAnthor(selector) {
      this.scrollLock = true;
      this.$nextTick(() => {
        const height = document.querySelector(`.${selector}`).offsetTop - 136;
        const container = document.querySelector('.scroll-wrap');
        container.scrollTo({
          top: height,
          behavior: 'smooth',
        });
      });
    },