IntersectionObserver

最近看到 IntersectionObserver 这个新增的API，不多说，贴上用法：

var io = new IntersectionObserver( 
            entries => {
                console.log(entries[0].time);
                // Timestamp when the change occurred
                // 当可视状态变化时，状态发送改变的时间戳
                // 对比时间为，实例化的时间，
                // 比如，值为1000时，表示在IntersectionObserver实例化的1秒钟之后，触发该元素的可视性变化

                console.log(entries[0].rootBounds);
                // Unclipped area of root
                // 根元素的矩形区域信息，即为getBoundingClientRect方法返回的值

                console.log(entries[0].boundingClientRect);
                // target.boundingClientRect()
                // 目标元素的矩形区域的信息

                console.log(entries[0].intersectionRect);
                // boundingClientRect, clipped by its containing block ancestors,
                // and intersected with rootBounds
                // 目标元素与视口（或根元素）的交叉区域的信息

                console.log(entries[0].intersectionRatio);
                // Ratio of intersectionRect area to boundingClientRect area
                // 目标元素的可见比例，即intersectionRect占boundingClientRect的比例，
                // 完全可见时为1，完全不可见时小于等于0

                console.log(entries[0].target);
                // the Element target
                // 被观察的目标元素，是一个 DOM 节点对象
                // 当前可视区域正在变化的元素
            },
            {
                threshold: [0, 0.25, 0.5, 0.75, 1],
                // root
                // DOM元素，但默认值为null，也就是视口区域
                // 表示监听的可视区域为整个视口，也就是浏览器的可视区域
                // 如果设置了DOM元素，那么视口就变为该元素（即，就算元素在屏幕的可视区域，但是不在该DOM元素的可视区域，仍然不会触发可视性变化）

                // rootMargin
                // 类似于css的margin属性，可以设置四个属性。
                // 该属性默认值为0px 0px 0px 0px，如果设置之后，会影响触发回调的时间

            }
        );
        // 开始观测某个元素
        io.observe(document.querySelector('.canvas-unit'));
         
        // 停止关注某个元素
        // io.unobserve(element);
         
        // 禁用整个 IntersectionObserver
        // io.disconnect();

 

兼容性确实也不算很好，但是常用的webkit内核算是覆盖全了：