左侧锚点点击滚动到相应位置，并且滚动轴滚动到位置对应的锚点需要高亮，两者冲突bug

Posted 2021-06-29 野猪佩奇007

项目场景：

提示：这里简述项目相关背景：
项目中需要左侧锚点点击滚动到相应位置，并且滚动轴滚动到位置对应的锚点需要高亮

---

问题描述：

写完之后发现点击锚点之后页面滚动触发了滚动相应位置的对应锚点高亮，所以锚点显示就是一个挨着一个高亮一直到点击的那个锚点结束，这就冲突了，一个点击了应该立即高亮不应该再一个一个挨着亮到点击的那个，就是两者冲突造成的，点击的时候页面滚动，触发了另一个功能

---

实现滚动监听并实时显示对应锚点高亮：

mounted：
this.$nextTick(function () {
      window.addEventListener("scroll", this.onScrolls);
    });
methods：
onScrolls() {
      let scrolleds = document.documentElement.scrollTop || document.body.scrollTop; // 586、1063分别为第二个和第三个锚点对应的距离
      console.log(scrolleds);
      //根据滚动页面距离来判断对应的锚点哪个高亮
      if (scrolleds < 900) {
        this.isname = 0;//改变判断左侧锚点背景以及字体颜色改变
      } else if (scrolleds < 1300 && scrolleds >= 900) {
        this.isname = 1;
      } else if (scrolleds < 1800 && scrolleds >= 1300) {
        this.isname = 2;
      } else if (scrolleds < 2200 && scrolleds >= 1800) {
        this.isname = 3;
      } else if (scrolleds < 2700 && scrolleds >= 2200) {
        this.isname = 4;
      // } else if (scrolleds < 2900 && scrolleds >= 2706) {
      //   this.isname = 5;
      } else if (scrolleds >= 2700) {
        this.isname = 5;
      }
    },

锚点点击滚动到相应位置锚点：

methods：
//锚点点击
    upmaod(index, selector) {
      this.isname = index;//这里改变就与滚动冲突了
      var anchor = this.$el.querySelector(selector);//selector为点击传来的锚点id名
      anchor.scrollIntoView({
        behavior: "smooth", // 平滑过渡
        block: "center", // 上边框与视窗顶部平齐
      });
    },

---

解决方案：

在锚点点击的时候改变高亮的判断，并且关掉滚动监听：
window.removeEventListener(“scroll”, this.onScrolls);

  //锚点点击
    upmaod(index, selector) {
      this.isname = index;
      window.removeEventListener("scroll", this.onScrolls);
      var anchor = this.$el.querySelector(selector);
      anchor.scrollIntoView({
        behavior: "smooth", // 平滑过渡
        block: "center", // 上边框与视窗顶部平齐
      });
    },