简介
be-there 是一个基于 Promise 封装的 JS 库，在检测 DOM 元素是否在当前视口可见区域时非常实用。它是一个轻量级的包，使用简单，可以方便地集成到您的项目中。
安装
您可以通过 npm 在您的项目中安装 be-there，命令如下：
npm install --save be-there
使用
be-there 本质上是一个非常简单的库，只有一个函数，您只需调用此函数并传递相应的参数即可。让我们来看看如何使用它。
import beThere from 'be-there';
const target = document.querySelector('#target');
beThere(target).then(() => {
// 检测到目标元素在当前视口可见
});该函数会返回一个 Promise，如果在视口中可见，则解析。您可以在 then() 方法的回调函数中编写相应的逻辑来处理检测结果。那么，您可能会想知道，参数 target 是如何工作的。让我们来看看有哪些选项可供使用。
选项
be-there 函数接受一个有以下可选属性的 options 对象。
| 选项 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| threshold | Number | 0 | 表示目标元素在视口可见区域中所占百分比的阈值。例如，将阈值设置为 0.5 表示目标元素在视口可见区域中占 50% 或更多的区域时，其将被视为可见。 |
| root | Element | null | 根元素，表示视口不包括元素；如果不指定任何根元素，则将视口设置为文档窗口。 |
| rootMargin | String | '0px 0px 0px 0px' | 根元素周围的边距（以像素为单位），格式为"上右下左" |
您可以将这些选项传递给 be-there 函数以进行设置。
-- -------------------- ---- -------
----- ------ - ----------------------------------
--------------- -
---------- ----
----- -------------------------------------
----------- ------
--
-------- -- -
-- -----------------------------------
--
--------- -- -
-- --------------
---我们已经介绍了 be-there 的基本用法及其选项，现在让我们来看看更具体的用例。
示例
假设您正在构建一个动画效果，并需要在某个元素在视口中可见时开始该动画。我们可以使用 be-there 完成此任务。
<div class="container"> <div class="animate-me"></div> </div>
-- -------------------- ---- ------- ---------- - ------- ------ --------- ----- - ----------- - ------- ------ ------ ------ ----------------- ---- -------- ----- -
-- -------------------- ---- -------
------ ------- ---- -----------
----- --------- - -------------------------------------
----- --------- - --------------------------------------
------------------ -
----- ----------
---------- ---
---------- -- -
----------------------- - --------
-------------------
- ---------- ----------- -------- -- ------- - --
- ---------- ------------- -------- ---- ------- --- --
- ---------- ----------- -------- -- ------- - -
-- -
--------- -----
----- ----------
---
---在上面的代码中，我们将阈值设置为 0.5，这意味着当 animate-me 元素在 container 元素中可见 50% 或更多的区域时，会解析 Promise，然后添加 animate 类并使用动画将其显示。
深度和学习意义
be-there 不仅是一个便捷的视区检测工具，它还带来了深度和学习价值。理解它如何实现，有助于更好地理解 Promise 以及 IntersectionObserver API。如果您对此感兴趣，可以阅读其源代码或了解如何使用 ES6 Promise 或 IntersectionObserver API 手动实现此功能。
总结
be-there 是一个非常简单而实用的工具，可以检测 DOM 元素是否在当前视口可见。它使用非常方便，且配有有用的可选属性，可以完成各种任务。希望这篇文章能够帮助你了解 be-there 的使用方法和价值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673defb81d47349e53bd1