简介
is-view 是一个小巧的 JavaScript 库，用于检测给定元素是否可见于当前视口。它支持滚动容器和嵌套滚动容器，并且可以完全自定义检测条件。
本文将向您介绍如何使用 is-view 检测元素是否可见，以及其常见用例和示例代码。
安装
使用 npm 安装 is-view：
npm install is-view
或者，您可以从 GitHub 仓库 下载该库的源代码。
用法
在您的代码中引入 is-view：
import isView from 'is-view';
然后，使用 isView(element) 函数来检测元素是否在视口中可见：
const element = document.querySelector('#my-element');
if (isView(element)) {
console.log('The element is visible!');
} else {
console.log('The element is not visible.');
}高级用法
is-view 还支持高级用法，例如：
检测范围
您可以指定要检测的范围，而不仅仅是视口本身。例如，如果希望仅检测某个滚动容器内的元素是否可见，则可以将该容器传递给 isView 函数：
const container = document.querySelector('#my-container');
const element = document.querySelector('#my-element');
if (isView(element, container)) {
console.log('The element is visible within the container!');
} else {
console.log('The element is not visible within the container.');
}自定义检测条件
is-view 还支持自定义检测条件。例如，如果您希望仅在元素的中心点可见时才将其视为可见，则可以传递一个回调函数：
-- -------------------- ---- ------- ----- ------- - -------------------------------------- ----- --------- - --------------- ----- ------ ------------- -- - ----- ------- - --------- - ---------- - -- ----- ------- - -------- - ----------- - -- ------ ------------------------------ --------- --- -- ----------- - ---------------- ------ -- --- ------- -- ----------- - ---- - ---------------- ------ -- --- ------- -- --- ----------- -
示例代码
基本用法
以下示例演示了如何使用 is-view 检测单个元素是否在视口中可见：
-- -------------------- ---- -------
---- -------------- ---------------
---- ----------------- -- --------------
------- --------------
------ ------ ---- -----------------------------------------------------------
----- ------- - --------------------------------------
-- ----------------- -
---------------- ------- -- -----------
- ---- -
---------------- ------- -- --- -----------
-
---------检测范围
以下示例演示了如何仅在滚动容器内部检测元素是否可见：
-- -------------------- ---- -------
---- -------------- ------ ----------- ---------
---- ----------------- -------------- ---------
---- ----------------- -- ------- ------ --- ----------------
------
------
------- --------------
------ ------ ---- -----------------------------------------------------------
----- --------- - ----------------------------------------
----- ------- - --------------------------------------
-- ---------------- ----------- -
---------------- ------- -- ------- ------ --- -------------
- ---- -
---------------- ------- -- --- ------- ------ --- -------------
-
---------自定义检测条件
以下示例演示了如何仅在元素的中心点可见时才将其视为可见：
<div style="height: 1000px;"></div> <div id="my-element" style="position: relative; top: 500px;">I am partially visible!</div> <script type="module > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/41097) ，转载请注明来源 [https://www.javascriptcn.com/post/41097](https://www.javascriptcn.com/post/41097)