Universal-Observer 是一个可以用于监听元素在视口中的可见性和位置变化的 JavaScript 库。它可以在 Web 和移动端应用中使用，并且非常轻量级。
安装
你可以使用 npm 来安装 Universal-Observer：
--- ------- ------------------
用法
在你的项目中引入 Universal-Observer：
------ ----------------- ---- ---------------------
创建一个实例
创建一个 UniversalObserver 实例，并传入一个回调函数：
----- -------- - --- --------------------------- --------- -- -
--------------------- -- -
-- -- ------------
---
---监听一个元素
使用 observe 方法来监听一个元素：
--------------------------------------------------------
可以对 Elements 内任何节点使用 Universal-Observer
Universal-Observer 可以用于添加到 HTML 文档中任何节点上以检测其可见性，只要你传递一个正确的节点到 observe 方法：
-----
----
----
---- -------------- -----------
-----
----
---- -------------- -----------
-----
----
---- -------------- -----------
-----
-----
----------- --- - -------------------------------- -------------- -- - --------------------- ---
在回调函数中使用 intersectionObserverEntry
Callback 函数有两个参数： entries 和 observer。在 entries 数组中，每个元素都是一个 IntersectionObserverEntry，它包含了被监听元素（target）的信息和他是否可见：
----- -------- - --- --------------------------- --------- -- -
--------------------- -- -
-- ---------------------- -
---------------------------- -- -----------
-
---
---得到元素进入或者离开视口的百分比
每个 IntersectionObserverEntry 元素还包含一个 intersectionRatio(元素进入另一个元素的比例)，他的值在 0.0 - 1.0 之间，0.0 表示元素完全不可见，1.0 则表示元素完全可见。可以将这个值作为临界比率使用：
----- -------- - --- --------------------------- --------- -- -
--------------------- -- -
-- ------------------------ - ---- -
---------------------------- -- ---- ---- --- -----------
-
---
---禁用和启用观察器
如果你想禁用观察器，你可以调用 disconnect 方法：
----------------------
如果你想重新启用观察器，可以调用 observe 方法重新绑定观察器：
--------------------------------------------------------
结论
Universal-Observer 是一个非常有用的库，特别是在实现懒加载和元素动画的场景中。这个库非常易于使用，而且提供了丰富和深入的功能。如果你需要在你的项目中添加这种元素观察器，那么你一定需要给 Universal-Observer 一次尝试。
示例代码
------ ----------------- ---- ---------------------
----- -------- - --- --------------------------- --------- -- -
--------------------- -- -
-- ---------------------- -
---------------------------- -- -----------
-
---
---
--------------------------------------------------------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005533f81e8991b448d07e2