介绍
intersection-observer-point 是一个用于监听元素是否进入视口的 npm 包，它具有较低的 API 复杂度和高度的可定制性。本文将详细介绍 intersection-observer-point 的使用方法。
安装
NPM 安装
npm install intersection-observer-point --save
使用方法
引入
import Observer from "intersection-observer-point"
初始化
-- -------------------- ---- -------
----- ------------ - ------------------
--- ---------
--------- -
-- --
-- --
------ ------------------
------- -------------------
--
-------- -- -- -
-------------------- ------- --------
--
-------- -- -- -
-------------------- ---- --------
--
---参数说明
- el: 监听的元素选择器；
- boundary: 约束元素进入视口的矩形区域，即 viewport；
- onEnter: 元素进入视口时触发的回调函数；
- onLeave: 元素离开视口时触发的回调函数。
boundary 对象说明
boundary 对象是一个包含四个属性的对象，如下所示：
{
x: 0, // 若为正值，则元素可进入视口左侧，但不能超出视口左侧，若为负值，则元素可以超出视口左侧
y: 0, // 同 x
width: window.innerWidth, // 元素可进入的 x 轴长度
height: window.innerHeight // 元素可进入的 y 轴长度
}销毁
initObserver.destroy();
示例代码
-- -------------------- ---- -------
------ -------- ---- -----------------------------
----- ------------ - ------------------
--- ---------
--------- -
-- --
-- --
------ ------------------
------- -------------------
--
-------- -- -- -
-------------------- ------- --------
--
-------- -- -- -
-------------------- ---- --------
--
---
------------- -- -
-----------------------
-- ------指导意义
intersection-observer-point 是一款极为实用的 npm 包，它的使用方法非常简单，可以大大提高我们的团队开发效率和代码可维护性。同时，本文在使用方式的介绍中，对对应参数进行了详细解释，对于初次接触该包的人也可以轻松上手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671481e8991b448e3664