介绍
egjs-visible 是一个基于 Intersection Observer API 实现的 JavaScript 库，用于检测元素是否在视口中可见。它可以帮助开发者更方便地判断某个元素是否出现在屏幕内，从而做出相应的处理。
安装
你可以通过 npm 来安装 egjs-visible：
npm install @egjs/visible
使用
- 导入库
import { OnVisible } from "@egjs/visible";- 创建实例
const onVisible = new OnVisible("#target", {
once: false,
threshold: 0.1,
});- 监听事件
onVisible.on("visible", ({ visibleRatio }) => {
console.log(`visible ratio: ${visibleRatio}`);
});在上面的代码中，我们创建了一个 OnVisible 的实例，指定了要监听的元素（#target），并设置了一些选项（once 和 threshold）。然后我们监听了它的 visible 事件，并在回调函数中打印出了可见比例。
选项
egjs-visible 提供了一些选项来控制其行为。下面是一些常用的选项及其默认值：
once：布尔值，表示是否只触发一次。默认为false。threshold：数字或数组，表示可见比例的阈值。默认为0。当值为数组时，egjs-visible 会在每个阈值处触发事件。
事件
egjs-visible 提供了以下事件：
visible：当元素进入屏幕内部分可见时触发。ratio：当元素进入屏幕时，每次可见比例变化时触发。hidden：当元素完全离开屏幕时触发。
在上面的示例代码中，我们监听了 visible 事件，并在回调函数中打印出了当前可见比例。你也可以监听其他事件并做出相应的处理。
示例代码
下面是一个简单的示例，展示了如何使用 egjs-visible 来检测元素是否可见，并在可见状态下添加类名：
-- -------------------- ---- -------
---- ------------------
------- --------------
------ - --------- - ---- ----------------
----- --------- - --- ----------------- -
----- ------
---------- ----
---
----------------------- -- ------------ -- -- -
-- ------------- - -- -
--------------------------------------------------------
- ---- -
-----------------------------------------------------------
-
---
---------
-------
---- -
------ ------
------- ------
----------------- -----
-
-------- -
----------------- -----
-
--------在这个示例中，我们创建了一个实例来监听 .box 元素的可见性，并在可见状态下添加 .visible 类。你可以在 CSS 中定义 .visible 类的样式来改变元素的外观，以达到某些效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/39144