当前位置: 首页 > Web前端 > HTML5

IntersectionObserver

时间:2023-04-05 22:46:05 HTML5

概述IntersectionObserver接口提供了一种异步观察目标元素与其祖先元素或顶级文档视口的交集状态的方法。祖先元素和视口称为根。当创建一个IntersectionObserver对象时,它被配置为监听给定比例的根可见区域。IntersectionObserver一旦创建,其配置就不能改变,因此给定的观察者对象只能用于监视可见区域的特定变化;但是,您可以在同一个观察者对象中配置多个目标元素。使用constoption={threshold:[0,0.5,1],root:document.querySelector('body'),rootMargin:"500px0px"};constio=newIntersectionObserver(entries=>{console.log(entries);},option)//开始观察io.observe(element);//停止观察io.unobserve(element);//关闭观察者io.disconnect();IntersectionObserverEntry对象参数说明time:变化的时间target:观察到的目标元素rootBounds:根元素矩形区域信息boundingClientRect:目标元素intersectionRect矩形区域信息:目标元素与视口相交区域的信息intersectionRatio:目标元素的可见比例,完全可见时为1,完全不可见时为1小于等于0optionobjectattribute说明threshold属性判断何时触发回调函数root