Intersection Observer

1.介绍

Intersection Observer用于检测DOM元素在可视窗口中的位置，即可视性，可用于资源的预加载和延迟加载。于2016年11月29日，草案发布。兼容性，http://caniuse.com/#feat=intersectionobserver。

注：异步api，优先级不高

2.用法

var
    ele = document.getElementById("box"),
    ob = new IntersectionObserver(
        () => {
                console.log('触发了')
        });

ob.observe(ele);

2.1实例化对象的参数

2.1.1callback 

　　

var
    ob = new IntersectionObserver(
    changes => {
　　　　　　//changes为事件对象
        for(const change of changes) {
        　　// Timestamp when the change occurred
         　　console.log(change.time);  
        　　// Unclipped area of root
         　　console.log(change.rootBounds);
         　 // target.boundingClientRect()    
             console.log(change.boundingClientRect);                            
            // boundingClientRect, clipped by its containing block ancestors, and intersected with rootBounds
             console.log(change.intersectionRect);          
            // Ratio of intersectionRect area to boundingClientRect area
             console.log(change.intersectionRatio);
            // the Element target                      
             console.log(change.target);             
          }
19　　　　});               

 

2.1.2 配置项

threshold：数组，用于定义目标元素可视范围到达多少是触发回调。

root：父级容器，在哪个父级容器中滚动。

rootMargin：用于影响交叉区域的范围。

{
	threshold: [0.25,1],
	root: document.querySelector('body'),
	rootMargin: "100px"
}

2.2实例化对象的方法　

observer(ele)：开始监听某个元素；

unobserver(ele)：取消某个元素的监听；

disconnect()：关闭观察器；

takeRecords()： 返回观察器的队列（数组），并清除当前队列。