526互联

对目标元素进行监听 - addListener和IntersectionObserver

发布时间 2023-07-13 11:08:35作者: WaterRec

在web的构建中，经常需要对元素进行监听，例如监听元素是否出现在可视范围内。

我们可以通过addEventListener来监听滚动，计算元素距离顶部的位置对元素的变更来做出反应。

但是长时间大量的触发事件反而对网页性能影响很大，使用节流的话其实也只是浅浅的优化一下性能。有没有其他思路可以既当元素改变超过阈值的时候触发我们的状态又可以降低性能要求呢。

Intersection Observer API - Web API 接口参考 | MDN (mozilla.org)

Intersection Observer

通过Intersection Observer API来实现我们的要求。观察者。

Intersection Observer API提供了一种一部检测目标元素与祖先元素相交情况。当发生相交的时候就可以触发我们的事件监听，而不是长时间保持监听状态，在js中被称为观察者模式。

利用这个我们可以轻松构建图片懒加载、内容无限滚动、视频自动播放等常见的需求上。

用法

  1. 创建一个IntersectionObserver对象

    const observer = new IntersectionObserver(callback);
//callback为触发事件

  2. Observer.observe目标对象

    observer.observe(dom);
// observer可以同时监听多个元素, 触发gfn

  3. 可以设置具体参数

    let options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0,// 阈值为 1.0 意味目标元素完全出现在 root 选项指定的元素中可见时
}
const observer = new IntersectionObserver(callback, options);
// options设置observer

在回调函数中传参可以通过target属性来获取目标. 当然如果监听多个对象, 则需要遍历再获取target

const callbak = (entries) => {
	entries.forEach((entry) => {
		if (entry.isIntersecting) {
			console.log("我出现了");
		}
	}
}

entry.isIntersecting为状态值, 译为是否出现在root中, 且满足options条件.