前言
在前端页面开发过程中，经常会碰到需要判断元素是否在可视区内的情况，并进行相应的交互效果。这个过程一般可以借助一些现有的 JS 库来完成，但是这些库实现的方式各不相同，而且有的库代码量较大，引入后会增加项目体积。在这篇文章中，我们将介绍如何使用 npm 包 in-viewport 来判断元素是否在可视区内的方法，并带有详细的步骤说明和示例代码。
简介
in-viewport 是一个非常轻量级的 npm 包，可以用来检测一个元素是否在视口内。in-viewport 使用了 Intersection Observer API，可以用来检测元素是否与观察者相交。同时，由于 in-viewport 仅仅是一个函数，因此它的安装和使用非常简单。
安装
安装 in-viewport 有两种方式：
使用 npm 安装
首先，在命令行中进入到项目根目录，然后执行以下命令：
npm install in-viewport
这样就可以将 in-viewport 安装到项目中了。
使用 CDN 引入
在网页中，也可以直接使用 CDN 引入 in-viewport：
<script src="https://cdn.jsdelivr.net/npm/in-viewport"></script>
使用方法
获取元素
首先，需要获取到需要进行视口检测的元素。在本文中，我们创建一个 div 元素，并将需要进行视口检测的元素放入其中。
<div id="my-element"> <p>这是需要进行视口检测的内容。</p> </div>
接着，使用 JavaScript 获取到这个元素：
const myElement = document.getElementById('my-element')初始化 in-viewport
in-viewport 的使用非常简单，只需要将需要进行视口检测的元素作为参数传入 inViewport 函数即可：
inViewport(myElement, () => {
console.log('元素已经进入视口')
}, () => {
console.log('元素已经离开视口')
})如上代码所示，inViewport 参数中有三个参数：第一个参数为需要检测的元素 myElement，第二个参数为元素进入视口时的回调函数，第三个参数为元素离开视口时的回调函数。
示例代码
-- -------------------- ---- -------
---- ----------------
---------------------
------
------- --------------------------------------------------------
--------
----- --------- - -------------------------------------
--------------------- -- -- -
-----------------------
-- -- -- -
-----------------------
--
---------深度解析
在上面的示例代码中，我们使用了 in-viewport 方法，但他并不支持所有的浏览器，因为 Intersection Observer API 还不在所有的浏览器上得到支持。为了让这个方法可以在更多的浏览器上使用，我们可以对其进行 polyfill，这样即使用户使用了旧浏览器，仍然可以正常使用。
可以使用 @w3c/intersection-observer 来进行 polyfill：
npm install --save @w3c/intersection-observer
然后，在 JavaScript 中导入 polyfill：
import 'intersection-observer'
最后，我们再次来看下完整的代码：
-- -------------------- ---- -------
---- ----------------
---------------------
------
------- --------------------------------------------------------
--------
------ -----------------------
----- --------- - -------------------------------------
--------------------- -- -- -
-----------------------
-- -- -- -
-----------------------
--
---------结论
这篇文章介绍了如何使用 npm 包 in-viewport 来判断元素是否在可视区内，并给出了详细的使用步骤和示例代码。同时，我们还讨论了如何 polyfill 这个函数以确保其在更多的浏览器上运行。希望本文对各位前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcbc7b5cbfe1ea0612684