当前位置: 首页 > Web前端 > JavaScript

[JS]IntersectionOberver使用

时间:2023-03-27 14:50:26 JavaScript

使用场景:判断目标元素是进入还是离开容器。如果目标元素进入或离开容器,可以触发回调函数执行操作逻辑。与监听滚动事件并计算的方法相比,使用IntersectionOberver可以减少性能开销。极简入口配置准备了三个要素:1.选项构造器的配置项。2.函数监听事件发生后的处理逻辑。3.element被监控的元素。使用1.创建一个interSectionObserver实例(容器)。2.interSectionObserver监听指定元素。以上配置补充说明:1.如果options中root没有设置,默认为null,此时容器为window。2.options中threshold=0.2,设置此配置后,当被观察元素出现在容器中的面积大于20%时,触发handleChange。3、handleChange有四种情况会触发。如下图,4.entries[0].isIntersecting的值为true,表示满足阈值条件(观察到的元素出现在容器中)。可以在handleChange中使用这个值进行逻辑判断注意:页面销毁时(准确的说是销毁前),需要取消观察,释放intersectionOberverwindow.onbeforeunload=function(){intersectionObserver.unobserve(obInner3);交集观察者=空;};代码示例见https://github.com/DiracKeeko...完成同步更新到自己的语雀https://www.yuque.com/diracke...