[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...