使用场景:
    判定目标元素是否进入或离开一个容器。
    如果目标元素进入或离开容器，可以触发回调函数，执行操作逻辑。

    相比于使用监听scroll事件并计算的方式，使用IntersectionOberver可以降低性能开销。

    极简入门配置
    准备好3个要素:
    1、option 构造函数的配置项。
    2、function 监听事件发生后的处理逻辑。
    3、element 被监听元素。
    image.png

    使用
    1.创建interSectionObserver实例（容器）。
    2.interSectionObserver监听指定元素。
    image.png

    对上述配置的补充说明:
    1.options中的root如果不设置，默认为null，此时容器为window。
    2.options中的threshold = 0.2，此配置设置后，当被观察元素出现在容器中的区域面积大于20%时触发handleChange。
    3.handleChange有四种情况会触发。
    如下图所示
    image.png

    4.entries[0].isIntersecting 的值为true，表示满足threshold条件（被观察元素出现在容器中）。handleChange中可以使用这个值做逻辑判断

    注意：
    页面销毁时（准确的说是销毁前），需要取消观察，并把intersectionOberver释放
    window.onbeforeunload = function() {
    intersectionObserver.unobserve(obInner3);
    intersectionObserver = null;
    };

    代码示例见
    https://github.com/DiracKeeko/daily_test/blob/master/0074IntersectionObserver.html

    完结