intersectionObserver 类的使用(1)
作者:互联网
JavaScript 的 intersectionObserver 可以用来异步监听目标DOM元素与祖先元素或视口(viewport)的交叉状态。
简单一点的说,它可以异步检测某个元素是否出现在视口里。比起利用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