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，如果哪位大佬能帮忙在完善下小弟感激不尽，我会在实验过后更新这篇文章。

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