Universal-Observer 是一个可以用于监听元素在视口中的可见性和位置变化的 JavaScript 库。它可以在 Web 和移动端应用中使用，并且非常轻量级。
安装
你可以使用 npm 来安装 Universal-Observer：
npm install universal-observer
用法
在你的项目中引入 Universal-Observer：
import UniversalObserver from 'universal-observer';
创建一个实例
创建一个 UniversalObserver 实例，并传入一个回调函数：
const observer = new UniversalObserver((entries, observer) => {
entries.forEach(entry => {
// do something...
});
});监听一个元素
使用 observe 方法来监听一个元素：
observer.observe(document.querySelector('#my-element'));可以对 Elements 内任何节点使用 Universal-Observer
Universal-Observer 可以用于添加到 HTML 文档中任何节点上以检测其可见性，只要你传递一个正确的节点到 observe 方法：
-- -------------------- ---- -------
-----
----
----
---- -------------- -----------
-----
----
---- -------------- -----------
-----
----
---- -------------- -----------
-----
-----
------const lis = document.querySelectorAll('li');
lis.forEach(li => {
observer.observe(li);
});在回调函数中使用 intersectionObserverEntry
Callback 函数有两个参数： entries 和 observer。在 entries 数组中，每个元素都是一个 IntersectionObserverEntry，它包含了被监听元素（target）的信息和他是否可见：
const observer = new UniversalObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log(`${entry.target} is visible!`);
}
});
});得到元素进入或者离开视口的百分比
每个 IntersectionObserverEntry 元素还包含一个 intersectionRatio(元素进入另一个元素的比例)，他的值在 0.0 - 1.0 之间，0.0 表示元素完全不可见，1.0 则表示元素完全可见。可以将这个值作为临界比率使用：
const observer = new UniversalObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.intersectionRatio > 0.5) {
console.log(`${entry.target} is more than 50% visible!`);
}
});
});禁用和启用观察器
如果你想禁用观察器，你可以调用 disconnect 方法：
observer.disconnect();
如果你想重新启用观察器，可以调用 observe 方法重新绑定观察器：
observer.observe(document.querySelector('#my-element'));结论
Universal-Observer 是一个非常有用的库，特别是在实现懒加载和元素动画的场景中。这个库非常易于使用，而且提供了丰富和深入的功能。如果你需要在你的项目中添加这种元素观察器，那么你一定需要给 Universal-Observer 一次尝试。
示例代码
-- -------------------- ---- -------
------ ----------------- ---- ---------------------
----- -------- - --- --------------------------- --------- -- -
--------------------- -- -
-- ---------------------- -
---------------------------- -- -----------
-
---
---
--------------------------------------------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005533f81e8991b448d07e2