其他分享
首页 > 其他分享> > intersectionObserver 类的使用(1)

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'])
    },
}

 

标签:DOM,元素,item,video,使用,intersectionObserver,监听
来源: https://www.cnblogs.com/linghuchongchong/p/15784232.html