在前端开发中，有时候需要根据用户滚动页面的位置来动态地加载或操作特定的 DOM 元素。因此，判断一个 DOM 元素是否在屏幕内成为了一个非常实用的技术。
本文将介绍如何使用 JavaScript 判断特定的 DOM 元素是否在屏幕内，并提供相应的示例代码和讲解，帮助读者更好地掌握这一技巧。
方法一：getBoundingClientRect()
getBoundingClientRect() 是一个返回当前元素位置信息的方法。它返回一个包含元素位置信息的对象，其中 top、bottom、left 和 right 分别表示元素顶部距离视窗顶部、底部距离视窗顶部、左侧距离视窗左侧和右侧距离视窗左侧的像素值。
我们可以通过比较某个元素的 getBoundingClientRect() 返回值与当前视窗的高度和宽度来判断该元素是否在屏幕内。具体操作如下：
-------- ----------------------- -
----- ---- - ---------------------------
------ -
-------- -- - --
--------- -- - --
----------- -- ------------------- -- -------------------------------------- --
---------- -- ------------------ -- -------------------------------------
--
-
-- --
----- ------- - --------------------------------------
-- ------------------------------ -
-------------------- -- -- ------------
- ---- -
-------------------- -- --- -- ------------
-可以看到，我们定义了一个名为 isElementInViewport() 的函数，接收一个参数 el，表示所要判断的元素。函数内部首先调用 getBoundingClientRect() 获取该元素的位置信息，然后比较其位置信息与当前视窗的高度和宽度，最终返回一个布尔值，表示该元素是否在视窗内。
方法二：Intersection Observer API
除了使用 getBoundingClientRect() 外，我们还可以使用 Intersection Observer API 来判断元素是否在视窗内。这是一种基于事件的 API，能够异步地检测指定元素与其祖先元素或顶级文档视窗的交集情况。
下面是如何使用 Intersection Observer API 判断某个元素是否出现在视窗内的代码示例：
----- ------- - -
----- -----
----------- ------
---------- ---- -- ------------
--
-------- ----------------- --------- -
----------------------- -- -
-- ---------------------- -
-------------------- -- -- ------------
- ---- -
-------------------- -- --- -- ------------
-
---
-
----- -------- - --- ------------------------------ ---------
----- ------- - --------------------------------------
--------------------------上述代码中，我们定义了一个 options 对象，其中 root 表示视窗的根元素，rootMargin 表示指定矩形区域与目标元素边界之间的偏移量，threshold 表示监听元素可见度变化的阈值。我们还定义了一个 callback 回调函数，用于处理元素交集情况的变化。
接着，我们创建了一个 IntersectionObserver 对象，并使用 observe() 方法将某个 DOM 元素（例如 id 为 my-element 的元素）添加到监视列表中。当该元素进入或离开视窗时，回调函数就会被调用。
深度解析
以上两种方法都能够判断指定的 DOM 元素是否在屏幕内，但它们各有优缺点。
使用 getBoundingClientRect() 方法的优点是简单易懂、
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/841