Vue.js实现监听页面元素是否滚动到可视区域

前言：

        最近做公司官网项目虽然整体没什么动画效果，但还是遇到一些比较好玩的效果，这里呢就先记录其中一个，我觉得后续大家做长页面时候可能会遇到的效果，话不多说先上个图。

当页面滚动到可视区域显示的时候上面的tabs要进行选中效果，比如我这里就是荣誉资质文字变红了。

那么要实现这种效果按逻辑这时候是需要监听滚动条的滚动事件，滚动多少个像素之后将tabs的文字变个色。那么这又有个问题了 因为我们并不能保证这个页面每个模块的高度是固定的，也许第一个模块的像素很高，其他的可能很低，那总不能一直微调吧？这就太麻烦了 那么这时候js有个API叫：IntersectionObserver，由于这个API比较新，一些老版本的浏览器就不支持了，比如IE浏览器，当然都要兼容IE的话也就不要想着用这个了。

IntersectionObserver兼容性

IntersectionObserver用法

// elementArray：是需要监听的页面dom元素组，建议使用一个div包裹住需要监听的dom元素
// callback: 是回调函数
const monitorVisualArea= (elementArray,callback)=>{
    // 创建JS交叉观察函数
    var observer = new IntersectionObserver((mutaions) => {
        // 创建IntersectionObserver对象
        if (mutaions[0].isIntersecting) {
          // 传入参数并调用回调函数
          callback(mutaions[0].target.id)
        }
      });
      for (let i = 0; i < elementArray.length; i++) {
        // 需要监听的元素
        observer.observe(elementArray[i]);
      }
}

以上代码是监听指定元素需要出现在可视区域。如果是监听单个元素那么把for循环去掉即可

const elementArray= document.querySelector(".about-content-wapper").children;
this.$monitorVisualArea(elementArray,this.changeCheck)

 以上是获取指定dom元素下的子元素集合，我这里采用this.$xxxx 的形式是因为我将方法加入到VUE的原型链中了

methods: {
    changeCheck(id) {
      this.list.forEach((element) => {
        element.check = false;
      });
      let res = this.list.filter((p) => p.anchorPoint === id)?.[0] || null;
      if (res) {
        res.check = true;
      }
    },
}

以上代码是this.changeCheck回调函数的具体代码，也是写元素到了可视区域后的业务处理。

PS：值得注意的是 我这段代码有点小bug，不过无伤大雅，哈哈哈哈哈

总结:

        以上代码段可以直接复制到项目中使用，但要按不同的情况进行修改小部分代码，最重要的IntersectionObserver 这个API，如果哪位大佬能帮忙在完善下小弟感激不尽，我会在实验过后更新这篇文章。

        在此祝各位代码功底更上一层楼，感谢各位观看，谢谢！！！