在前端开发中，经常需要检查元素是否在屏幕上可见。例如，在实现懒加载、滚动事件等功能时，判断元素是否在可视范围内是非常重要的。
方法一：使用 Intersection Observer API
Intersection Observer API 是浏览器提供的一个新接口，用于检测目标元素与祖先元素或顶级文档视窗之间的交叉状态。通过该 API 可以轻松地检查一个元素是否在屏幕上可见。
-- -------------------- ---- -------
----- -------- - --- ---------------------------- -- -
--------------------- -- -
-- ---------------------- -
-------------------- -- ----------
- ---- -
-------------------- -- --- ----------
-
---
---
------------------------------------------------------------上面的代码创建了一个 IntersectionObserver 实例，并传入一个回调函数。当被观察的元素进入或离开视窗时，回调函数会被调用。在回调函数中，可以根据 isIntersecting 属性来判断元素是否在屏幕上可见。
方法二：使用 getBoundingClientRect() 方法
除了使用 Intersection Observer API，还可以使用 getBoundingClientRect() 方法来获取元素相对于视窗的位置和大小信息。通过比较元素的位置和视窗大小，可以判断元素是否在屏幕上可见。
-- -------------------- ---- -------
-------- ----------------------- -
----- ---- - ---------------------------
------ -
-------- -- - --
--------- -- - --
----------- -- ------------------- -- -------------------------------------- --
---------- -- ------------------ -- -------------------------------------
--
-
----------------------------------------------------------------------------上面的代码定义了一个 isElementInViewport() 函数，用于判断元素是否在屏幕上可见。函数中使用 getBoundingClientRect() 方法获取元素的位置和大小信息，并根据视窗大小比较元素的位置。
总结
以上是两种检查元素是否在屏幕上可见的方法。Intersection Observer API 更加高效，但它需要浏览器支持，并且兼容性不太好。而使用 getBoundingClientRect() 方法则更加通用，但需要自行编写代码来比较元素的位置和视窗大小。在实际开发中，可以根据具体需求选择合适的方法来判断元素是否在屏幕上可见。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15554