使用Intersection Observer API来实现当指定元素进入或离开视窗时执行相应的操作

鲍成龙 1K 0
// 匹配加载 选择器
var el = document.querySelector('.class');

// 建立观察者
var ob = new IntersectionObserver(function(entries){
	var entry = entries[0];

	// isIntersecting 为true 为进入,false为离开
	if(entry.isIntersecting) {

		// 进入视窗重叠 执行加载
		// console.log('执行加载');
	}
	
},{
	// 1 视窗重叠 0 视窗不重叠
	thresholds: 1
});

// 观察
ob.observe(el);

1、首先,通过document.querySelector('.class')方法选择了一个具有.class类名的元素,并将它赋值给变量el

2、接着,创建了一个IntersectionObserver对象,并传入一个回调函数作为参数。这个回调函数将在观察的元素进入或离开视窗时被调用。

3、在回调函数中,通过entries参数获取了观察元素的相关信息。在这里,我们只获取了第一个entry

4、使用entry.isIntersecting属性来判断观察元素是否进入视窗。如果isIntersectingtrue,表示元素进入了视窗,我们可以在接下来的代码中执行相应的加载操作。

5、在观察者对象的配置选项中,我们设置了thresholds为1,表示只要有1像素的元素进入视窗,就会触发回调函数。

6、最后,调用ob.observe(el)方法来开始观察指定的元素el。当元素的可见性发生变化时,就会触发回调函数的执行。

发表评论 取消回复
表情 图片 链接 代码

分享