IntersectionObserver 交叉观察器

目录

1、IntersectionObserver 介绍

2、添加观察Dom对象

3、创建观察对象

3.1、IntersectionObserver有两个参数：

3.2、IntersectionObserver 观察实例提供方法：

 3.3、option 参数配置

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