简介
在前端开发中，滚动事件常常被用到，而在滚动事件中，如何判断一个 DOM 元素是否已经进入视口内成为了一个常见的问题。有时候我们需要在进入视口时执行某些操作，比如实现 lazy load，也有可能需要在元素离开视口时执行操作。为了解决这个问题，我们可以使用一些工具库。其中一个比较优秀的工具库是 scroll-scout，它是一个轻量级的工具库，用于检测滚动事件触发时元素是否在视口内。
安装
我们可以通过 npm 安装 scroll-scout：
npm install scroll-scout
使用
在使用 scroll-scout 前，需要先引入它：
import scrollScout from 'scroll-scout';
scroll-scout 提供了一个名为 launch 的方法，用于开启滚动事件的监听。我们在组件的 mounted 钩子函数中调用它即可。
-- -------------------- ---- -------
--------------------
--------- -----------------------------------
------ ----------------- -
-- ---------------
--
----- ----------------- -
-- ---------------
-
---在这个代码片段中，我们为 launch 方法传递了一个对象作为参数，其中包含了三个属性：
elements：需要被监听的元素，使用querySelectorAll方法来获取。enter：当元素进入视口时执行的回调函数。exit：当元素离开视口时执行的回调函数。
使用 scroll-scout 非常简单，以上就是最基本的使用示例。下面，我们详细介绍各个参数的含义。
elements
elements 是一个必须的参数，用于指定监听的 DOM 元素。通常我们会使用 querySelectorAll 方法来获取需要被监听的元素，比如：
let elements = document.querySelectorAll('.item');这里我们通过类名 .item 来获取需要被监听的元素列表，并将其赋值给变量 elements。
enter
enter 是一个回调函数，当元素进入视口时会被执行。在该函数中，我们通常会对进入视口的元素进行某些操作，比如设置元素的样式或者触发元素的动画。在 enter 回调函数中，我们可以通过参数 element 来获取当前进入视口的元素。比如：
scrollScout.launch({
elements: document.querySelectorAll('.item'),
enter: function(element) {
element.classList.add('active');
}
});在这个代码片段中，我们将进入视口的元素的类名设置为了 active，从而触发了该元素的某些样式或者动画。
exit
exit 是另一个回调函数，当元素离开视口时会被执行。类似于 enter，我们也可以在 exit 回调函数中对元素进行某些操作。在 exit 回调函数中，我们同样可以使用 element 参数来获取当前离开视口的元素。
-- -------------------- ---- -------
--------------------
--------- -----------------------------------
------ ----------------- -
--------------------------------
--
----- ----------------- -
-----------------------------------
-
---在这个代码片段中，我们将离开视口的元素的类名设置为了 active，从而撤销了该元素的一些样式或者动画。
高级配置
除了基本的使用方式外，scroll-scout 还提供了一些高级配置，包括自定义监听区域、启用自定义阈值等。
自定义监听区域
在基本使用方式中，scroll-scout 会自动将项目容器视作滚动监听区域，但是有时候我们需要自定义滚动监听区域，比如容器是 overflow: scroll 的。
-- -------------------- ---- -------
--------------------
--------- -----------------------------------
------ ----------------- -
--------------------------------
--
----- ----------------- -
-----------------------------------
--
---------- ----------------------------------
---在这个配置中，我们将滚动监听区域由默认的整个项目容器 .container 更改为了 .wrapper 元素。
启用自定义阈值
scroll-scout 默认使用 0.5 作为阈值，即当元素进入或离开视口的比例超过 50% 时才触发回调函数。但是我们也可以通过 threshold 参数自定义阈值。
-- -------------------- ---- -------
--------------------
--------- -----------------------------------
------ ----------------- -
--------------------------------
--
----- ----------------- -
-----------------------------------
--
---------- ---
---在这个配置中，我们将阈值设为了 0.2，即当元素进入或离开视口的比例超过 20% 时才触发回调函数。
示例
最后，我们提供一个完整的示例代码。
-- -------------------- ---- -------
---- ----------------
---- -------------
-------- ------
-------- ----- ----- --- ----- ----------- ---------- ----- --- -- ------- ------ ---------- -- ------ -- ------ ----- ------- -- ---- -- ----- -----------
------
---- -------------
-------- ------
------- ---- ----- ----- -- ------------- -- --------- ----- ---- ------ ------ -- ------ ----- --------- --------- ---- -------- --------- --- -------------
------
---- -------------
-------- ------
-------- ----- ----- --- ----- ----------- ---------- ----- --- -- ------- ------ ---------- -- ------ -- ------ ----- ------- -- ---- -- ----- -----------
------
---- -------------
-------- ------
------- ---- ----- ----- -- ------------- -- --------- ----- ---- ------ ------ -- ------ ----- --------- --------- ---- -------- --------- --- -------------
------
-------- -------------------- ---- ------- -------- - ------- ------ --------- ------- ----------------- -------- -------- ----- - ----- - ------- ------ ----------------- ----- -------------- ----- -------- ----- ----------- --- ----- - ------------ - ---------- -------------- -------- -- -
-- -------------------- ---- -------
------ ----------- ---- ---------------
--------------------
--------- -----------------------------------
------ ----------------- -
--------------------------------
--
----- ----------------- -
-----------------------------------
--
---------- -----------------------------------
---------- ---
---在这个示例中，我们创建了一个滚动监听区域 .wrapper 和四个被监听元素 .item。当某个元素进入视口时，我们会将其设置为 active，从而展示元素的文本内容。当元素离开视口时，我们会将其撤销样式。同时，我们通过自定义监听区域和自定义阈值来展示了 scroll-scout 的高级配置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600555b781e8991b448d2d05