在前端开发中，我们经常需要对元素是否出现在视口中进行判断，例如需要实现滚动无限加载、懒加载等功能。为了方便开发，很多开发者会选择使用封装好的 npm 包来实现相关功能，@libshin/in-viewport 就是一个不错的选择。
@libshin/in-viewport 是什么？
@libshin/in-viewport 是一款轻量级的 npm 包，用于判断一个元素是否出现在视口中。该包可以用于分析单个元素或整个文档中的多个元素，同时支持多个回调函数的调用。
使用步骤
安装
要使用 @libshin/in-viewport，首先需要安装该包。可以使用 npm 命令进行安装：
npm install @libshin/in-viewport --save
引入
安装完成后，我们需要将 @libshin/in-viewport 引入到我们的项目中。可以使用 import 或 require 语句进行引入，例如：
import InViewport from '@libshin/in-viewport';
或者
const InViewport = require('@libshin/in-viewport');使用
安装和引入完成后，我们就可以使用 @libshin/in-viewport 来实现视口中元素的判断了。下面是使用该包的基本步骤：
创建实例
首先，我们需要创建一个 InViewport 的实例。可以在 constructor 中传入一个对象，对象中的属性包含用于实例化 InViewport 的参数：
const instance = new InViewport({
container: window,
elements: '.my-element',
threshold: 0.1,
});以上代码中，我们传入了三个参数：
container：视口容器，默认为window。elements：需要进行判断的元素，可以使用 CSS 选择器进行指定。threshold：元素可见度的阈值，取值范围为 0 到 1，默认为 0。
监听事件
创建实例后，我们需要监听实例的 change 事件，以获得元素可见性的变化。例如：
instance.on('change', el => {
console.log(el, 'is visible');
});change 事件会在元素可见度改变时触发，回调函数的参数为当前变化的元素。
销毁实例
当我们不再需要使用 InViewport 实例时，需要及时销毁以释放资源。可以使用实例的 destroy 方法进行销毁：
instance.destroy();
销毁实例后，之前监听的事件将被自动移除。
示例
下面是一个示例代码，展示了如何使用 @libshin/in-viewport 实现视口中元素的判断。
-- -------------------- ---- -------
---- ----------- ------------- -------
---- ----------- ------------- -------
---- ----------- ------------- -------
------- ------------------------------------------------------------
--------
----- -------- - --- ------------
---------- -------
--------- -------
---------- ----
---
--------------------- -- -- -
--------------------- -- ----------
---
---------在上面的示例中，我们使用 InViewport 对包含 .box 类的元素进行可见性判断。实例创建后，我们监听 change 事件，每当某个 .box 元素的可见性发生变化时，就会在控制台输出该元素的 id。
总结
@libshin/in-viewport 是一款轻量级的 npm 包，用于判断一个元素是否出现在视口中。该包可以用于分析单个元素或整个文档中的多个元素，同时支持多个回调函数的调用。在使用时，我们需要创建一个 InViewport 的实例，并监听其 change 事件以获得元素可见性的变化。如果不再需要使用实例，记得及时销毁以释放资源。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f8c238a385564ab6e7e