intersectionObserver 类的使用（1）

 

JavaScript 的 intersectionObserver 可以用来异步监听目标DOM元素与祖先元素或视口（viewport）的交叉状态。

MDN链接

 

简单一点的说，它可以异步检测某个元素是否出现在视口里。比起利用getBoundingClientRect()方法以及scroll事件同步监听，在性能和操作性上，都优秀不少。

 

在项目中，可以用它制作一个每当用户查看某视口时才触发的动画（这样就有用户每次滚动到此处都重新触发动画的效果）

这里以Vue2 项目为例：

1. 在data中创建监听的全局变量 intersectionObserver

  

2. 在template中引用一些DOM元素：

 

  

  

 

 3. 在methods中定义初始化和监听DOM元素的方法：

 　　在new IntersectionObserver（）构造函数中， 为每个监听的元素设置回调函数（callback function），定义元素出现时的动作。

 　　使用构造函数返回的对象来监听DOM元素

 

 

4. 在mounted中调用方法：

  

5. 在destroyed中取消监听：

  

 源码：

          <div class="video-marketing">
            <video ref="scan-jump"
                   style="width: initial; height:100%;"
                   muted>
              <source src="./assets/video/cover002.mp4"
                      type="video/mp4" />
            </video>
          </div>
        <div class="video-surcharge">
          <video ref="buy-total"
                 style="width: initial; height:100%;"
                 muted>
            <source src="./assets/video/cover001.mp4"
                    type="video/mp4" />
          </video>
        </div>
        <div class="video-position">
          <video ref="online-ads"
                 style="width: initial; height:100%;"
                 muted>
            <source src="./assets/video/cover003.mp4"
                    type="video/mp4" />
          </video>
        </div>

  data() {
    return {
      intersectionObserver: null,
    }
  },
  mounted() {
    this.infiniteVideo()
  },
  destroyed() {
    // 页面销毁前取消所有监听video
    this.intersectionObserver.disconnect()
  },
  methods: {
    // 重复显示video动画效果
    infiniteVideo() {
      // video进入可视区域判断
      this.intersectionObserver = new IntersectionObserver(entries => {
        entries.forEach(item => item.isIntersecting && item.target.play())
      })

      this.intersectionObserver.observe(this.$refs['scan-jump'])
      this.intersectionObserver.observe(this.$refs['online-ads'])
      this.intersectionObserver.observe(this.$refs['buy-total'])
    },
｝