|
观察者模式监听判断dom元素是否在可视区域内
本项目是使用vue3 setup的写法。
在页面挂载完毕后设置observer监听：
onMounted(async ()=>{
其中的参数是你要监听的dom元素
observer.observe(videoCard.value);
})
观察者模式中使用new IntersectionObserver函数，函数中有参数entries，参数为数组，数组中第一项的isIntersecting如果为true代表观察者观察的目标元素在可视区域内，为false代表不在可视区域内。
var observer = new IntersectionObserver(callback[, options]);
参数：
callback
当元素可见比例超过指定阈值后，会调用一个回调函数，此回调函数接受两个参数：
entries
一个IntersectionObserverEntry对象的数组，每个被触发的阈值，都或多或少与指定阈值有偏差。
observer
被调用的IntersectionObserver实例。
options 可选
一个可以用来配置observer实例的对象。如果options未指定，observer实例默认使用文档视口作为root，并且没有margin，阈值为0%（意味着即使一像素的改变都会触发回调函数）。你可以指定以下配置：
root
监听元素的祖先元素Element对象，其边界盒将被视作视口。目标在根的可见区域的的任何不可见部分都会被视为不可见。
rootMargin
一个在计算交叉值时添加至根的边界盒(bounding_box (en-US))中的一组偏移量，类型为字符串(string) ，可以有效的缩小或扩大根的判定范围从而满足计算需要。语法大致和CSS 中的margin 属性等同; 可以参考 The root element and root margin in Intersection Observer API来深入了解margin的工作原理及其语法。默认值是"0px 0px 0px 0px"。
threshold
规定了一个监听目标与边界盒交叉区域的比例值，可以是一个具体的数值或是一组0.0到1.0之间的数组。若指定值为0.0，则意味着监听元素即使与根有1像素交叉，此元素也会被视为可见. 若指定值为1.0，则意味着整个元素都在可见范围内时才算可见。可以参考Thresholds in Intersection Observer API 来深入了解阈值是如何使用的。阈值的默认值为0.0。
返回值
一个可以使用规定阈值监听目标元素可见部分与root交叉状况的新的IntersectionObserver 实例。调用自身的observe() 方法开始使用规定的阈值监听指定目标。
例子：
const observer = new IntersectionObserver(entries => {
console.log(entries[0].isIntersecting)//返回true代表在页面可视区域，false代表不在页面可视区域。
})
因为有消耗性能，所以在页面卸载之前必须要停止监听，解绑元素。
onBeforeUnmount(()=>{
if(observer){
observer.unobserve(videoCard.value)//解绑元素
observer.disconnent();//停止监听
}
})
|