Intersection Observer 是一种用于观察元素与其祖先（父母）元素或 viewport 可见区域交叉状态的 API。它可以跟踪元素是否刚刚进入或退出视图区域，或在当前视图区域内可见的情况下发生变化，而且与 scroll 事件不同，它对性能的影响非常小。
IntersectionObserverUtil 就是 Intersection Observer API 的帮助类，它提供了一种简单的方法来观察元素的交叉状态。
安装
使用 npm 安装 intersection-observer-util：
npm install intersection-observer-util
使用方法
先在 JavaScript 中引入 IntersectionObserverUtil：
import IntersectionObserverUtil from 'intersection-observer-util';
然后，您就可以使用 IntersectionObserverUtil.observe() 方法来观察元素的交叉状态了。
监听元素进入视图区域
const element = document.querySelector('.my-element'); IntersectionObserverUtil.observe(element, () => { console.log('my-element 进入视图区域了'); });
监听元素离开视图区域
const element = document.querySelector('.my-element'); IntersectionObserverUtil.observe(element, null, () => { console.log('my-element 离开视图区域了'); });
监听元素状态变化
const element = document.querySelector('.my-element'); IntersectionObserverUtil.observe(element, (id, intersecting) => { console.log(`my-element 的交叉状态发生变化，可见状态是 ${intersecting}`); });
API 详解
observe(element, onAppear?, onDisappear?)
element: 要观察的元素onAppear: 当元素进入视图区域时调用的函数。可选。onDisappear: 当元素离开视图区域时调用的函数。可选。
onStateChanged(callback)
callback: 当元素交叉状态发生变化时调用的函数。
示例代码
根据元素可见性来加载图片
-- -------------------- ---- ------- ------ ------------------------ ---- ----------------------------- ----- ------ - ------------------------------------------- -------------------------------------------- ------------- -- - -- -------------- - ----- ----- - ---------------------------- -- ------- - ------------------------- -------------------------------- ---------------------------------- - - --- ----------------------- --- -- - ---------------------- ----- - --------------- ----- ---------- - ------------------------------------- ----- -- -- - --------------- ----- ----------- --- ---展开代码
根据元素可见性来播放视频
-- -------------------- ---- ------- ------ ------------------------ ---- ----------------------------- ----- ------ - --------------------------------------------- -------------------------------------------- ------------- -- - ----- ----- - ---------------------------- -- -------------- - ------------- - ---- - -------------- - --- ----------------------- ----- -- - ------------------------ ------- - --------------- ----- ---------- - ---------------------------------------- ---展开代码
总结
IntersectionObserverUtil 提供了一种简单的方法来观察元素的交叉状态。在实际开发中，您可以使用它来动态加载图片或视频，或根据元素状态来执行其他操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005673881e8991b448e3bc7
