目录
3.1、IntersectionObserver有两个参数：
3.2、IntersectionObserver 观察实例提供方法：
1、IntersectionObserver 介绍
IntersectionObserver该接口提供观察元素与父元素交叉状态的方法
2、添加观察Dom对象
<div id="td_box_id"></div>
let target = document.getElementById('td_box_id');3、创建观察对象
let observer: IntersectionObserver;
observer = new IntersectionObserver(
(entries) => {
entries.forEach((item) => {
//这里判断当前交叉状态，如果返回true，则监听Dom对象与父组件产生交叉
if (item.isIntersecting) {
observer && observer.unobserve(target);//取消监听Dom对象
}
});
},
{
threshold: 0.3,
}
);
observer && observer.observe(target);//开始监听Dom对象
//该方法写在页面销毁前
observer && observer.disconnect();//销毁监听对象3.1、IntersectionObserver有两个参数：
- callback：交叉状态发生变化的回调函数
- option：配置参数(可选)
3.2、IntersectionObserver 观察实例提供方法：
- observe：开始监听Dom对象
- unobserve：取消监听Dom对象
- disconnect：销毁监听对象
- takeRecords：获取所有监听对象
3.3、option 参数配置
- threshold：范围：0-1，表示观察者进入视窗百分比才会触发回调函数；0 表示观察者刚接触视窗，1表示观察者全部进入视窗
- root：用于观察的根元素，默认是视窗，如果指定元素，则观察者Dom对象必须是该元素的子元素
- rootMargin：延伸视窗的大小，类似css中的padding