chromedp 判断元素是否存在_实用推荐如何优雅的判断元素是否进入当前视区

背景

在上篇文章：记一次 「 无限列表 」滚动优化 中， 

我介绍了「 如何优化一个无限滚动列表 」。

用到了懒加载方案， 一个关键点是：需要判断元素是否在当前视区。

我们今天就看看这个问题。

---

今天的主要内容包括：

• 使用元素位置判断元素是否在当前视区
• 使用 Intersection Observer 判断元素是否在当前视区
• 实例：懒加载
• 实例：无限滚动
• 实用 npm 包推荐

正文

1. 使用元素位置判断元素是否在当前视区

这种方法实现起来比较简单， 我们一步一步来。

首先：编写一个 util 函数 isVisible，它将仅接收一个参数，即 element。

export const isVisible = (el) => { };

使用 getBoundingClientRect 获取该元素的位置

const rect = el.getBoundingClientRect();

将找到窗口的高度和宽度

const vWidth = window.innerWidth || document.documentElement.clientWidth;

const vHeight = window.innerHeight || document.documentElement.clientHeight;

再编写一个函数，该函数基本上将接收 x 和 y 点，并使用elementFromPoint函数返回元素。

const elementFromPoint = function (x, y) { 
  return document.elementFromPoint(x, y); 
};

检查元素是否在窗口内:

// Return false if it's not in the viewport
if (rect.right 0 
  || rect.bottom 0
  || rect.left > vWidth 
  || rect.top > vHeight) { 
  return false; 
}

边界检查：

// Return true if any of its four corners are visible
 return (
   el.contains(elementFromPoint(rect.left, rect.top))
   || el.contains(efp(rect.right, rect.top))
   || el.