使用JavaScript检查元素是否在视口中可见

在需要检查元素是否在视口中可见的情况下，这是相当常见的。令人惊讶的是，至少在直接的方式中，没有内置的方法来实现这一点。幸运的是，JavaScript提供了所有必要的工具来自己解决这个问题。

第一步需要我们获取元素的坐标。我们可以使用Element.getBoundingClientRect()方法和对象解构来实现这一点。该方法返回一个对象，其中包含元素的top、right、bottom和left边缘的坐标，以及元素的width和height。

我们还需要知道视口的尺寸。我们可以使用Window.innerWidth和Window.innerHeight属性来获取这些值。然后，我们可以使用这些值来确定元素是否在视口中可见。

如果我们想要检查元素是否完全可见，我们可以简单地将元素的坐标与视口的尺寸进行比较。如果我们想要检查元素是否部分可见，我们需要将元素的坐标与视口的尺寸和元素的尺寸进行比较。

总结一下，我们可以使用一个可选参数来确定我们是否要检查元素是否部分可见。

const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
  const { top, left, bottom, right } = el.getBoundingClientRect();
  const { innerHeight, innerWidth } = window;
  return partiallyVisible
    ? ((top > 0 && top < innerHeight) ||
        (bottom > 0 && bottom < innerHeight)) &&
        ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
    : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
};

// 例如，100x100的视口和一个位于位置{top: -1, left: 0, bottom: 9, right: 10}的10x10像素的元素
elementIsVisibleInViewport(el); // false -（不完全可见）
elementIsVisibleInViewport(el, true); // true -（部分可见）