关于前端:JS-IntersectionOberver使用

应用场景:
断定指标元素是否进入或来到一个容器。
如果指标元素进入或来到容器，能够触发回调函数，执行操作逻辑。

相比于应用监听scroll事件并计算的形式，应用IntersectionOberver能够升高性能开销。

极简入门配置
筹备好3个因素:
1、option 构造函数的配置项。
2、function 监听事件产生后的解决逻辑。
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，示意满足threshold条件（被察看元素呈现在容器中）。handleChange中能够应用这个值做逻辑判断

留神：
页面销毁时（精确的说是销毁前），须要勾销察看，并把intersectionOberver开释

window.onbeforeunload = function() {
   intersectionObserver.unobserve(obInner3);
   intersectionObserver = null;
};

代码示例见
https://github.com/DiracKeeko…

完结

同步更新到本人的语雀
https://www.yuque.com/diracke…