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